· 3 min de lectura

Blockquotes y citas semánticas en HTML

Traducido por IA desde el original en inglés.

Quotation, n: The act of repeating erroneously the words of another.
Ambrose Bierce, The Unabridged Devil's Dictionary

Quizás conoces la etiqueta HTML blockquote, que indica que su contenido es una cita tomada de otra fuente.

<blockquote>
  Quotation, n: The act of repeating erroneously
  the words of another.
</blockquote>

Idealmente, las citas también deberían incluir la fuente y/o autor, para que quien lee sepa de dónde viene. La intuición podría llevarte a poner esa información dentro del blockquote, junto al texto citado:

<blockquote>
  Quotation, n: The act of repeating erroneously
  the words of another.

  – Ambrose Bierce, The Unabridged Devil's Dictionary
</blockquote>

Pero en este caso, la intuición falla. La documentación de blockquote en HTML dice que la atribución de la cita, si existe, debe ir fuera del elemento blockquote.

Entonces, si va fuera, ¿cómo mantenemos un vínculo semántico entre la cita y su fuente? Puede parecer menor, pero marca diferencia para personas que consumen contenido con lector de pantalla. Veamos cómo.

Los elementos figure y figcaption

El HTML semántico es un lenguaje de marcado muy rico, con elementos que muchas veces ignoramos. <figure> y <figcaption> son un buen ejemplo: muy útiles y poco usados.

The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit.
MDN

Estos elementos suelen usarse para titular imágenes de manera correcta, como en la foto de abajo.

Un antiguo muelle abandonado visto desde la orilla, extendiéndose hacia el mar. Al fondo hay muchas aves. El agua está calma y el cielo sugiere que la foto fue tomada al atardecer.
Un antiguo muelle abandonado en Punta Arenas, Chile

El elemento img debe seguir teniendo alt correcto para accesibilidad, pero el caption también aporta contexto para todas las personas, más allá de necesidades de accesibilidad. Igual que en libros de texto, en la web las figuras también deberían llevar leyenda.

Intencionalmente no incluyo aquí el código de esta imagen porque el foco del artículo son las citas, pero te recomiendo inspeccionar su markup con las devtools del navegador y revisar también sus propiedades de accesibilidad.

Volviendo a las citas

Entonces, ¿cómo encaja todo esto con las citas? Nuestro objetivo era dar información de fuente. Basta con envolver la cita dentro de un <figure> y poner autor/fuente dentro de <figcaption>.

<figure>
  <blockquote>
    Quotation, n: The act of repeating erroneously
    the words of another.
  </blockquote>
  <figcaption>
    Ambrose Bierce, The Unabridged Devil's Dictionary
  </figcaption>
</figure>

Un paso más: el elemento cite

Puedes ir un paso más allá y marcar semánticamente el nombre de la fuente dentro del caption. Para eso, usa <cite>[^cite-attr].

[^cite-attr]: También podrías usar el atributo cite en <blockquote>, pero en mi opinión es poco útil porque la URL no queda visible ni accesible para quien lee.

<figure>
  <blockquote>
    Quotation, n: The act of repeating erroneously
    the words of another.
  </blockquote>
  <figcaption>
    Ambrose Bierce, <cite>The Unabridged Devil's Dictionary</cite>
  </figcaption>
</figure>

Y por último, puedes incluir la URL de la fuente como enlace dentro de <cite>, como aquí:

Resultado final

<figure>
  <blockquote>
    Quotation, n: The act of repeating erroneously
    the words of another.
  </blockquote>
  <figcaption>
    Ambrose Bierce,
    <cite>
      <a href="https://www.goodreads.com/book/show/49256.The_Unabridged_Devil_s_Dictionary">
        The Unabridged Devil's Dictionary
      </a>
    </cite>
  </figcaption>
</figure>

Ese es el código de la cita que ves al inicio de este artículo.