15. Etiquetar contenido textual en HTML

Mark Norman Francis. 8 de julio del 2008. Última modificación: 9 de marzo de 2017 (equipo docente del grado de Multimedia). Publicado en: párrafo, texto, énfasis, cita, pre

En este apartado explicaremos los conceptos básicos del uso de HTML para describir el significado del contenido dentro del cuerpo de vuestro documento.

Veremos elementos estructurales generales como los títulos y los párrafos y la incrustación de citas y código. Después también veremos el contenido en línea, como por ejemplo las citas cortas y el énfasis, y acabaremos con un análisis rápido del contenido presentacional anticuado.

Los contenidos de este apartado son los siguientes:

• 15.1. El espacio: la última frontera
• 15.2. Elementos de bloque
  • 15.2.1. Títulos de sección de página
  • 15.2.2. Párrafos genéricos
  • 15.2.3. Citar otras fuentes
  • 15.2.4. Texto preformateado
• 15.3. Elementos en línea
  • 15.3.1. Citas breves
  • 15.3.2. Énfasis
  • 15.3.3. Texto en cursiva
• 15.4. Elementos presentacionales: no utilizar nunca
• Resumen

15.1. El espacio: la última frontera

Una cuestión muy importante que queremos tratar antes de empezar a hablar sobre el texto es la del espacio, y concretamente la del espacio entre palabras. Cuando se escribe el HTML, el documento fuente contendrá lo que se conoce como "espacios en blanco", que son los caracteres del archivo que sirven para separar el texto. El carácter de espacio más habitual es el que se obtiene al pulsar la barra espaciadora, pero hay otros, como el tabulador y la marca entre dos líneas independientes de un documento (conocido como retorno o línea nueva).

Por ejemplo, un navegador interpretaría lo siguiente:

<h3>In the
            beginning</h3>

Ved ejemplos reales en: "Whitespace example"

como equivalente a:

<h3>In the beginning</h3>

El único caso en el que esto no es así es el elemento pre, del cual hablaremos con detalle más adelante en este mismo apartado.

Esto puede provocar algunas confusiones para los autores que escriben por primera vez un documento en HTML y que intentan introducir espacios adicionales dentro del texto para conseguir el sangrado deseado, dejar más espacio después de un punto entre frases o añadir más espacio vertical entre párrafos. El diseño visual de los documentos no se debe definir en el código fuente HTML, sino que se debe hacer mediante las hojas de estilos, de las que hablaremos más adelante en esta serie de apartados.

15.2. Elementos de bloque

En este subapartado explicaremos la sintaxis y el uso de los elementos de bloque más frecuentes utilizados para formatear texto.

15.2.1. Títulos de sección de página

Una vez que hayáis dividido la página en secciones lógicas, cada una de estas secciones debería ir introducida por un título adecuado. De ello se habla con más detalle en el apartado Qué necesita una buena página web.

Es muy importante utilizar los niveles de títulos para describir el documento en referencia a las secciones, subsecciones, subsubsecciones, etc., ya que esto hace que el documento sea más comprensible para los lectores de pantalla y para los procesos automatizados (como los robots de indexación de Google).

Un buen ejemplo de una estructura de títulos, utilizando este documento como plantilla, podría ser el siguiente:

<h1>Etiquetar contenido textual en HTML</h1>
<h2>Introducción</h2>
<h2>El espacio: la última frontera</h2>
<h2>Elementos de bloque</h2>
<h3>Títulos de sección de página</h3>
<h3>Párrafos genéricos</h3>
<h3>Citar otras fuentes</h3>
<h3>Texto preformateado</h3>
<h2>Elementos en línea</h2>

Ved ejemplos reales en: "Headings example"

[...y así sucesivamente...]

15.2.2. Párrafos genéricos

Por ejemplo:

<p>This is a very short paragraph. It only has two sentences.</p>

Ved ejemplos reales en: "Paragraph example"

En muchos artículos y libros, un párrafo puede contener sólo una frase. Aunque el significado (en cuanto a la prosa escrita) de la palabra párrafo está bastante claro, en la web hay áreas de texto mucho más cortas que a menudo aparecen entre elementos de párrafos por el simple hecho de que el autor cree que es más "semántico" que utilizar un elemento div (hablaremos de ello en otro apartado titulado "Contenedores genéricos").

15.2.3. Citar otras fuentes

Si la cita es de otra página web, podéis indicarlo utilizando el atributo cite.

Como en el ejemplo siguiente:

<p>HTML 4.01 is the only version of HTML that you should use
 when creating a new web page, as, according to the 
 specification:</p>
<blockquote cite="http://www.w3.org/TR/html401/">
<p>This document obsoletes previous versions of HTML 4.0,
 although W3C will continue to make those specifications and
 their DTDs available at the W3C Web site.</p>
</blockquote>

Ved ejemplos reales en: "Quoting other sources example"

El atributo cite no es necesario en el caso de que la cita se tome de una novela, una revista o de alguna otra forma de contenido fuera de línea.

15.2.4. Texto preformateado

En la mayoría de los navegadores web, el texto marcado como preformateado se mostrará al usuario tal como aparezca en el código fuente, algunas veces utilizando un tipo de letra de ancho fijo, lo cual da al texto el aspecto de haber sido escrito con una máquina de escribir. Este uso de tipos de letras de ancho fijo es uno de los primeros recursos que utilizaron los programadores para el texto preformateado.

En éste podéis ver un fragmento de código escrito en el lenguaje de programación Perl:

<pre><code class="language-perl">
# read in the named file in its entirety
sub slurp {
   my $filename = shift;
   my $file     = new FileHandle $filename;

   if ( defined $file ) {
      local $/;
      return <$file>;
   }
   return undef;
};
</code></pre>

Ved ejemplos reales en: "Preformatted example"

El uso de code que se hace en este ejemplo se explicará en el apartado sobre los elementos semánticos menos conocidos, que encontraremos más adelante en este mismo módulo.

15.3. Elementos en línea

En este subapartado explicaremos la sintaxis y el uso de los elementos en línea más frecuentes utilizados para formatear texto.

15.3.1. Citas breves

Una cita breve aparece normalmente entre comillas. Según la especificación HTML, estas citas las debe insertar el agente usuario para poder imbricarlas correctamente y que sepan el idioma que se utiliza en el documento. Se puede utilizar CSS para controlar las comillas utilizadas; este aspecto se tratará en el apartado sobre estilos de texto.

Un ejemplo de q en acción:

<p>This did not end well for me. Oh well,
      <q lang="fr">c'est la vie</q> as the French say.</p>

Ved ejemplos reales en: "Inline quote example"

15.3.2. Énfasis

El HTML contiene dos métodos para indicar que el texto de su interior debe aparecer enfatizado delante del usuario, como por ejemplo los mensajes de error, las advertencias o las notas.

Como en el ejemplo siguiente:

<p><em>Please note:</em> the kettle is to be unplugged at night.</p>

Ved ejemplos reales en: "Emphasis example"

Si hay que enfatizar toda una frase pero una parte concreta de ésta se debe enfatizar de una manera aún más importante, se pueden anidar elementos em para indicar un énfasis más fuerte de lo normal, como en el ejemplo siguiente:

<p><em>Please note: the kettle <em>must</strong> be unplugged every evening,
 otherwise it will explode - <em>killing us all</em></em>.</p>

Ved ejemplos reales en: "Emphasis and strong example"

De la misma forma, podéis utilizar el elemento strong, que indica la importancia del texto que rodea y que se suele mostrar en los navegadores como texto en negrita.

15.3.3. Texto en cursiva

Originalmente el elemento i era puramente presentacional: significaba exclusivamente que el texto que rodeaba debía mostrarse en letra cursiva. Pero la especificación de HTML5 dice:

"El elemento i representa un texto en una voz o un modo alternativo, o que de alguna manera queda fuera de la prosa normal.".

La especificación también dice explícitamente que los autores deben considerar si existen otros elementos más aplicables, como em, que se ajusten mejor semánticamente a aquello que se quiera expresar.

Un uso habitual de i es marcar términos en otros idiomas. En ese caso usaremos el atributo lang para especificar dicho idioma:

Como dicen los franceses, <i lang="fr">c'est la vie</i>...

También se aconseja el uso del elemento class para indicar cuál es el uso específico que estamos usando (y de esta manera poder presentar de maneras diferentes usos diferentes mediante el CSS). Hay que recalcar que si bien la presentación por defecto de i es la letra cursiva, con el CSS podremos indicar cualquier otra presentación (por ejemplo, con fondo amarillo, como si hubiésemos marcado el texto con un rotulador).

Texto en negrita

De la misma forma que i, b era inicialmente un elemento presentacional que indicaba el uso de negrita. Pero la especificación de HTML dice:

El elemento b representa una secuencia de texto a la que se quiere dirigir atención por motivos utilitarios sin darle ninguna importancia extra y sin implicar una voz o modo alternativos, como, por ejemplo, palabras clave en el resumen de un documento, nombres de productos en una crítica, palabras sobre las que se puede actuar en un juego de texto, o la entradilla de un artículo.

Como en el caso de i, es conveniente usar clases para indentificar por qué se está usando el elemento y aplicar los estilos correspondientes.

La especificación es dura en cuanto al uso de b:

...debería usarse como último recurso cuando ningún otro elemento sea más adecuado. En particular, los encabezamientos deberían usar los elementos h1 a h6, el énfasis debería usar el elemento em, la importancia debería denotarse con strong y el texto marcado o destacado debería usar el elemento mark.

15.4. Elementos presentacionales: no utilizar nunca

La especificación de HTML incluye varios elementos que se describen de manera general como "presentacionales", ya que sólo especifican qué aspecto debe tener el texto que contienen, pero no qué significan

La especificación ha etiquetado algunos de estos elementos como desaprobados. Eso significa que han sido sustituidos por un método más nuevo que permite conseguir los mismos resultados.

Aquí los describiremos brevemente, pero hay que tener en cuenta que esta explicación tiene casi exclusivamente un interés puramente histórico; estos elementos no se deben utilizar nunca en ninguna página web moderna. El efecto de todos estos elementos se debe conseguir de alguna otra manera, que se describirá en otros dos apartados: "Estilos de texto con el CSS" y "Elementos semánticos menos conocidos".

• font face="..." size="...". El navegador mostrará el texto en estos elementos utilizando un tipo de letra diferente del tipo por defecto; los tipos de letra, sin embargo, se deben definir con CSS.

• strike. El texto aparece rayado con una línea que lo atraviesa; si es sólo un efecto presentacional, este efecto se debería conseguir con CSS. Además, si el texto se quiere marcar como suprimido o no deseado, se debería etiquetar con el elemento del que se describe más adelante.

• tt. El texto se presenta en un tipo de letra de "teletipo" o de ancho fijo; este efecto se debería conseguir con el CSS o con algún elemento semántico más apropiado, como por ejemplo pre, tal como se ha visto anteriormente.

• big. Se ajusta el tamaño del texto; se debería conseguir con el CSS.

Resumen

En este apartado hemos hablado de algunos de los elementos más comunes que se utilizan para etiquetar contenido textual. En el siguiente apartado hablaremos de otro tipo de contenido: las listas.

Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial - Compartir bajo la misma licencia 3.0 No adaptada.

: :