Cómo citar en HTML: blockquote, q y cite

Las citas han sido algo muy bien asentado en HTML desde sus comienzos, puede que debido a su nacimiento en un entorno académico, probablemente el ámbito del conocimiento humano dónde más se utilizan las citas y referencias.

Los tres elementos principales para representar una cita y su fuente son:

<blockquote>: para reproducir una cita en bloque.
<q>: para reproducir una cita en línea.
<cite>: para representar la referencia a un trabajo creativo.

A lo largo de este post aprenderemos a citar de forma semánticamente correcta utilizando estos elementos de acorde con las especificaciones HTML.

Los elementos <blockquote> y <q>

Los elementos <blockquote> y <q> representan más o menos lo mismo, un fragmento citado desde otra fuente. La diferencia está en el contexto dentro del documento. Mientras <blockquote> representa una sección del documento citada desde otra fuente, <q> representa partes cortas dentro del contenido citadas desde otra fuente.

Además, el comportamiento en el flujo del documento es diferente, <blockquote> es renderizado a nivel bloque y <q> es renderizado en línea.

Cita de un fragmento en línea:

<p>La autora del libro asegura que
  <q>no es autobiográfico</q>
aunque tiene similitudes son su vida.</p>

Cita en una sección (bloque):

<p>La autora del libro declaró en rueda de prensa:</p>
<blockquote>
  A pesar de los que muchos piensan, el libro no es autobiográfico, aunque podría encajar en la mayor parte de mi vida.
</blockquote>

Es importante tener claro lo que significa que <blockquote> representa una sección del documento. Como tal, podemos poner prácticamente cualquier cosa en su interior, como un <header>, <footer>, <p>, títulos <h1> – <h6>, etc:

<p>La autora del libro declaró en rueda de prensa:</p>
<blockquote>
  <p>A pesar de los que muchos piensan, el libro no es autobiográfico, aunque podría encajar en la mayor parte de mi vida</p>
  <footer>- María Álvarez, autora del libro "Bla bla bla"</footer>
</blockquote>

Respecto al elemento <q>, es muy importante anotar que no se debe escribir las típicas comillas que representan una cita. Ni antes, ni después, ni dentro de <q>. En las especificaciones HTML5 se establece que las marcas de cita serán introducidas por el user-agent, es decir, por el navegador, y se pueden modificar a través de CSS.

También es importante saber que el elemento <q> no se debe utilizar para denotar sarcasmos u otros usos del lenguaje que no son citas aunque se suelan entrecomillar en el texto. En estos casos si podemos utilizar las comillas manualmente pero sin que haya elemento <q>.

El atributo cite

Tanto <blockquote> como <q> acepta el atributo cite. NO lo confundas con el elemento <cite> que veremos continuación.

El atributo cite ha de ser una URL válida dónde encontrar la fuente de la cita. Por ejemplo:

<p>La autora del libro declaró en rueda de prensa:</p>
<blockquote cite="https://ejemplo.es/noticias/declariones-de-maria-alvarez">
  <p>A pesar de los que muchos piensan, el libro no es autobiográfico, aunque podría encajar en la mayor parte de mi vida</p>
  <footer>- María Álvarez, autora del libro "Bla bla bla"</footer>
</blockquote>

Este atributo cite, aunque semánticamente correcto, no es visible y no aporta gran información para el usuario, motivo por el que no es muy utilizado como referencia a la fuente citada. Es mucho más utilizado el elemento <cite>, con significado semántico similar pero visible para el usuario.

El elemento <cite>

El elemento <cite> representa una referencia a un trabajo creativo. El concepto de trabajo creativo es muy amplio. Puede ser un libro, artículo, programa de TV, un poema, una pintura, un performance, y un larguísimo etcétera.

Las especificaciones HTML del elemento <cite> lo restringían al título de la obra, no podía contener el nombre del autor, la URL de referencia ni ninguna otra información, sólo el título de la obra:

<p>El cuadro <cite>Un árbol en un prado</cite>, de Federico López, será exhibido en el museo durante el mes de Junio.</p>

<p>Cómo informó <cite>Federico López</cite>, su cuadro será exhibido en el museo durante el mes de Junio.</p>

Sin embargo, ha sido ampliamente utilizado para incluir toda la información identificativa de la obra de referencia, por ejemplo, dentro de un <blockquote>:

<p>La autora del libro declaró en rueda de prensa:</p>
<blockquote>
  <p>A pesar de los que muchos piensan, el libro no es autobiográfico, aunque podría encajar en la mayor parte de mi vida</p>
  <footer>
    <cite><a href="https://ejemplo.es/noticias/declariones-de-maria-alvarez">María Álvarez, autora del libro "Bla bla bla"</a></cite>
  </footer>
</blockquote>

Las especificaciones HTML se han adaptado a este tipo uso y aceptan que el elemento <cite> incluya el título de la obra, el nombre del autor y otros datos identificativos de la obra, por ejemplo el año de publicación de un artículo o la URL dónde se puede encontrar online.

Es uno de los ejemplos más claros en los que las especificaciones se han adaptado al uso y no al revés, aunque todavía la mayoría de textos en Internet no recogen este cambio todavía.