A la hora del desarrollo web muchas veces tenemos que hacer referencia a textos o palabras ya dichas por alguien. Algo que suele ser bastante normal el portales con noticias de actualidad, entrevistas o -sin irnos más lejos- en nuestros blogs.
La mayoria de las veces, seguramente por desconocimiento, se tiende a encerrar el texto de la cita en un párrafo y separarlo con estilos del resto del contenido. Sin embargo, HTML nos ofrece tres etiquetas con las que podemos dar un significado más correcto y semántico a nuestras citas.
Tipos de etiquetas
Etiqueta <cite>
- Muestra el texto en cursiva
- No hace saltos de línea ni anterior ni posterior
- El contenido de la cita permanece en la misma línea que el texto anterior y posterior.
Etiqueta <q>
- No hace saltos de línea ni anterior ni posterior
- El contenido de la cita permanece en la misma línea que el texto anterior y posterior.
- Encierra el contenido entre comillas dobles
Etiqueta <blockquote>
- Hace saltos de línea tanto anterior como posterior
- Establece un padding y un margin al contenido de la cita
Uso de las etiquetas
De acuerdo, tenemos tres formas de citar contenido en nuestro HTML, pero ¿cuándo hacemos uso de cada una de ellas?.
Es muy sencillo. Si la cita en cuestión no es demasiado larga -alrededor de una línea- lo que es más semántico es utilizar el tag <q> dejando el tag <blockquote> para cuando se trate de un bloque de texto. Y en el caso de <cite> la utilizaremos cuando estemos haciendo referencia a otras fuentes.
Ejemplo de la etiqueta <q>
Como dice el refrán:<q>Quien a buen árbol se arrima, buena sombra le cobija</q>
Ejemplo de la etiqueta <blockquote>
Miguel de Cervantes escribió en El Quijote:
<blockquote>
En un lugar de la Mancha,
de cuyo nombre no quiero acordarme,
no ha mucho tiempo que vivía un hidalgo
de los de lanza en astillero, adarga antigua,
rocín flaco y galgo corredor.
Una olla de algo más vaca que carnero,
salpicón las más noches,
duelos y quebrantos los sábados,
lantejas los viernes,
algún palomino de añadidura los domingos,
consumían las tres partes de su hacienda.
</blockquote>
Ejemplo de la etiqueta <cite>
Como dijo <cite>Jack, El Destripador</cite>: <q>Vayamos por partes</q>
Atributos de las etiquetas
A parte de los atributos ya conocidos que puedan llevar como id, class, title recalcaría los dos siguientes que son opcionales y aplicarían tanto a <q> como a <blockquote>:
- cite: Contiene la URL origen de la que se ha extraído la cita (En el caso que se trate de un documento online).
- lang: Contiene el código del idioma en el que se encuentra la cita. Ej: ‘en’, ‘es’, ‘de’,…
Uso de los atributos cite y lang
<blockquote lang="en" cite="http://www.mycom.com/tolkien/twotowers.html">
<p>They went in single file, running like hounds on a strong scent,
and an eager light was in their eyes. Nearly due west the broad
swath of the marching Orcs tramped its ugly slot; the sweet grass
of Rohan had been bruised and blackened as they passed.</p>
</blockquote>
Blog de Martin Pulido 