Cuando marcamos el contenido de nuestras páginas, muchas veces tenemos que hacer referencia a textos que pueden ser tanto ajenos como propios. En ambos casos, haremos uso de las citas.

La mayoría de las veces, se tiende a encerrar el texto de la cita en un párrafo y separarlo con comillas del resto del texto. Esto tiene la desventaja de que los buscadores no interpretarán correctamente nuestro contenido. Sin embargo, HTML nos ofrece varias etiquetas con las que podemos enriquecer semánticamente a nuestro código. ¿Que etiquetas son y cuándo haremos uso de cada una de ellas?

comillas

Etiqueta <blockquote>

Sirve para englobar una cita de gran tamaño. El contenido de un blockquote puede incluir elementos de bloque tales como encabezados, listas, párrafos…etc. Puede resaltar la parte más interesante de nuestros textos y de esta manera fijar la atención de los usuarios donde más nos interese que lean.

También puede citar contenido externo. En este caso existe un atributo opcional cite que especifica la procedencia de la cita.

Ejemplo:

1
2
3
4

<blockquote cite="http://www.htmldog.com/reference/htmltags/blockquote/ lang="en">
     <p>El contenido de un blockquote elemento debe incluir elementos de bloque como encabezados, listas, párrafos o div's.</p>
     <p>Este elemento también puede tener un atributo opcional citar que especifica la ubicación (en la forma de una URI), donde la cotización ha venido. </p>
</blockquote>

Problemas con los blockquote

Si vas a utilizar blockquote para resaltar contenido de tu texto, va a ver un pequeño problema de accesibilidad. Para nosotros se trata de un texto visualmente destacado, pero para un lector de pantalla simplemente, es un texto duplicado. Por ello es conveniente proporcionar una información extra para los usuarios que se tropiecen con este problema.

Una solución puede ser ofrecer un mensaje oculto por CSS que diga algo así como “Inicio de texto destacado” antes de la cita y “Fin del texto destacado” al finalizar la misma.

parte de un artículo destacado

Etiqueta <Q>

Se trata de un elemento de línea que sirve para citaciones pequeñas. Los navegadores interpretan esta etiqueta como un entrecomillado.

Ejemplo:

1

<p>Pablo dijo<q>Hola</q> Pero Laura dijo <q>Adiós</q></p>

Aunque la etiqueta <q> cada vez se utiliza menos, tiene algunas propiedades muy útiles. Por ejemplo, puedes especificar el aspecto de las comillas a través de CSS de la siguiente manera:

1
2
3
4

/*CSS*/
Q {}
Q { quotes: '»' '«'   }
Q { quotes: '„' '“' }

Debido a algunos problemas con la codificación (sobre todo en Internet Explorer), puede ser útil dar a las comillas valores numéricos. De acuerdo a el web standard puedes incluso especificar el aspecto de las comillas, dependiendo del idioma del navegador del usuario. Este es el ejemplo del W3C:

1
2
3

/*CSS*/
:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»'   '«' '\2039' '\203A' }

Etiqueta <cite>

Sirve para marcar al autor de una cita.

Ejemplo:

1

<p>Y dijo <cite>Bob</cite> <q>pienso luego existo</q>.</p>

Atributos de las etiquetas

A parte de los atributos ya conocidos como id, class o title recalcaría los dos siguientes que son opcionales y se aplican 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. Por ejemplo: ‘en’, ‘es’, ‘de’,…

En resumen

Por lo tanto, utilizaremos la etiqueta <blockquote> para citas grandes o destacado de texto propio, para citas pequeñas utilizaremos la etiqueta <q> y para referenciar a otras fuentes la etiqueta <cite> es lo más adecuado.

Fuente Smashing magazine