La forma correcta de usar Blockquotes y Pullquotes

Justo como arte del destino (o tal vez un increíblemente buen algoritmo), me encuentro trabajando en el diseño de <blockquote> para este blog, quería que fuera algo vistoso pero al mismo tiempo elegante, como espero poder hacer con el resto del blog, y mientras lo hacía me he encontrado con un artículo en mi feed sobre cómo Michelle Barker ha estado utilizando mal los blockquotes, lo que al mismo tiempo me llevó a preguntarme si yo también hacía lo mismo (respuesta: si.)

You’ve probably used a <blockquote> when writing HTML. I know I’ve used literally hundreds of them. What I didn’t know is that I’ve been using them wrong all these years.

El artículo nos lleva a un agujero de conejo hacia otro artículo, ahora de Heydon Pickering, titulado "El elemento blockquote" en el que se expresan puntos interesantes sobre la historia del elemento y algunos de sus problemas más comunes, a continuación resumo algunos de los puntos más interesantes desde mi entendimiento.

#¿QUÉ ES UN BLOCKQUOTE?

Creo que el principal problema que Heydon menciona, siendo el mismo que Michelle ha cometido en el pasado, y del que al mismo tiempo yo he sido culpable; es simplemente no tener claro lo que es un blockquote, y eso mismo nos lleva a su uso incorrecto. No importa que tan fuerte golpees con la llave de tuercas, sigue sin ser un martillo.

En español, esto nos resulta aún más complicado porque blockquote no tiene una traducción literal a nuestro lenguaje, lo más cercano que he podido encontrar es simplemente a cita, ¿un bloque de cita?, ¿o una cita de bloque? Ninguno de ellos funciona especialmente bien… pero si buscamos la definición de cita literaria, nos encontramos con este link hacia el libro de estilo de la lengua española de la RAE, dando una definición un poco diferente a lo que muestra su propio diccionario sobre cita (énfasis mío):

Las citas reproducen fragmentos de otras obras o de palabras que no pertenecen al propio texto. Se trata, por tanto, de un discurso de segundo nivel que generalmente corresponde a una voz externa, pero que también puede tomarse de otra obra del mismo autor.

Esta es, la definición más cercana que tenemos a la intención original del elemento <blockquote>, y donde tantas veces nos hemos equivocado, y es no es algo raro ver citas de un artículo citado en el mismo articulo, lo que, aparentemente está mal.

Content inside a blockquote must be quoted from another source[…]

#BLOCKQUOTE vs. PULL QUOTE

Aquí es donde entra nuestro segundo actor principal, los Pull quotes, que para variar tampoco tiene una traducción literal (y cuyo concepto me ha constado mucho encontrar en español).

Un pull quote se refiere a jalar (pull) una parte del articulo que se está escribiendo para resaltarlo dentro del mismo artículo, esta es la diferencia principal entre pull quotes y blockquotes, más que diseño o posicionamiento de la cita, se trata de la fuente de la misma (externa vs interna).

Estos son bastante utilizados en revistas, debido varios factores, entre ellos, que las revistas tienen páginas. No es raro que se tomen citas del mismo artículo de alguna página anterior para recalcar algún punto más avanzado el artículo, esto no sucede en web porque hoy en día los artículos web únicamente ocupan una página, ya que no tenemos límite de cuanto se puede hacer scroll.

Otra razón importante del por qué los pull quotes son utilizados en revistas es que normalmente los artículos en revistas tienen diseños únicos para ellos, debido a que sólo serán impresos en papel la consistencia tiende a ser menos importante, y los recursos para poder diseñarlos tienden a ser menos (no es necesario todo un equipo de diseñadores y programadores para construir la página en donde irán impresos). Por lo tanto puedes tomar una cita del artículo para recalcarla fácilmente en la misma página.

Éstos no son factores determinantes en un sitio web, por lo cual debería ser raro ver pull quotes de la misma forma en que los vemos en revistas. Sin embargo, por cuestiones estéticas más que por cualquier otra cosa, si es algo común verlos.

Entonces…

#¿CÓMO USAR BLOCKQUOTES EN HTML?

Una vez hemos entendido (un poco) el punto del elemento, podemos deducir que fuera de cualquier situación estética, <blockquote> nos sirve para cuando queremos citar algún texto externo a nuestro artículo, por ejemplo:

1<blockquote>
2  <p>
3    Sonreí sin querer. Era divertido trabajar con las chicas; siempre estaban
4    haciendo chistes, lanzándose insultos y halagos en la cocina, quejándose de
5    clientes molestos o coqueteando con los cocineros y los lavatrastes. Había
6    sonreído más en esas dos semanas de lo que recordaba haberlo hecho en toda
7    mi vida.
8  </p>
9</blockquote>
10
11<cite>– El Jardín de las Mariposas</cite>
12

Mantener la fuente fuera de la cita tiene sentido, pero no puedo evitar pensar que se siente desconectado… Como si ambos no pertenecieran juntos, Heydon opina lo mismo, así que ha propuesto una solución utilizando <figure> y <figcaption> para complementarlos:

1<figure>
2  <blockquote>
3    <p>
4      Sonreí sin querer. Era divertido trabajar con las chicas; siempre estaban
5      haciendo chistes, lanzándose insultos y halagos en la cocina, quejándose
6      de clientes molestos o coqueteando con los cocineros y los lavatrastes.
7      Había sonreído más en esas dos semanas de lo que recordaba haberlo hecho
8      en toda mi vida.
9    </p>
10  </blockquote>
11
12  <figcaption>– <cite>El Jardín de las Mariposas</cite></figcaption>
13</figure>
14

Puedes ver como aún utilizamos el elemento <cite>, pero ahora todo se siente como parte del mismo bloque, en lo personal, a mi me gusta.

#CONCLUSIÓN

Hace muchos años, mientras intentaba crear el sitio más semántico en existencia, descubrí que hay muchísimos pequeños detalles que dificultan la tarea, así mismo muchos elementos tienen lugar para la interpretación, no todo en la especificación es tan simple como si y no. Lo importante, a mi parecer, es que tu sitio funcione, (y que sea accesible.)

Así que, al final. Sólo haz que tus usuarios estén cómodos ☺️️.