Logo de Mosaic
El texto central de HTML
Etiquetar contenido textual en HTML

15. Etiquetar contenido textual en HTML

Mark Norman Francis. 8 de julio del 2008. 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.

Nota

Después de cada ejemplo de código hay un enlace "Ved ejemplos reales" que os llevará a la visualización del resultado de este código fuente en un archivo diferente; de esta manera, podréis ver ejemplos reales de cómo se ve realmente este código fuente en el navegador, aparte del código en sí.

Los contenidos de este apartado son los siguientes:

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).

En el HTML, cuando un carácter de éstos aparece varias veces seguidas, se considera (casi) siempre como un único carácter de espacio.

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.

Ved también

Podéis ver el apartado 7 del módulo "Conceptos de diseño web".

El HTML define seis niveles de títulos: h1, h2, h3, h4, h5 i h6 (desde el más importante hasta el menos importante). Hablando en general, h1 sería el título principal de toda la página que introduciría el tema. h2 se utilizaría para dividir la página en secciones, h3 en subsecciones y así sucesivamente.

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

El párrafo es el componente básico de la mayoría de los documentos. En HTML, un párrafo se representa con el elemento p, que no tiene ningún atributo especial.

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").

Ejemplo

Un párrafo es un conjunto de una o más frases, igual que en los periódicos y libros. En la web es una buena idea utilizar el elemento de párrafo para estos conjuntos de frases y no para cualquier parte aleatoria de texto de la página. Si son sólo unas cuantas palabras y no una frase propiamente dicha, entonces quizá sería mejor no etiquetarlo como un párrafo.

15.2.3. Citar otras fuentes

A menudo, los artículos, los apuntes de bloques y los documentos de referencia citan total o parcialmente algún otro documento. En el HTML, estas citas se marcan con el elemento blockquote para citas largas, como frases enteras, párrafos, listas o similares.

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

Cualquier texto en el que el formato y el espacio en blanco (podéis ver más arriba) sean importantes se debería etiquetar con el elemento pre.

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.

Ved también

Podéis ver el apartado 21 de este 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.

Ved también

Podéis ver el apartado 12 del módulo "Fundamentos de HTML".

15.3.1. Citas breves

Las citas breves que se utilizan en una frase o párrafo normal se ponen en el elemento q. Igual que el elemento blockquote, éste puede contener un atributo cite, que indica la página de Internet en la que se puede encontrar la cita.

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.

Ved también

Podéis ver el apartado 29 del módulo "CSS".

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.

En los navegadores visuales esto significa normalmente la aplicación de un color o un tipo de letra diferente o la visualización del texto en negrita o cursiva. Para los usuarios de lectores de pantalla, el resultado puede ser una voz diferente o algún otro efecto acústico. Para presentar texto con énfasis hay que utilizar el elemento em, que habitualmente se presenta en los navegadores como texto en cursiva.

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".

Ved también

Podéis ver el apartado 29 del módulo "CSS" y el apartado 21 de este módulo.

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.

Logo Creative Commons
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
.
: Ir al índice :