The correct way of using blockquotes

Just like fate (or maybe an excellent algorithm), I find myself working on the design of <blockquote> for this blog. I wanted it to be something flashy but at the same time elegant, as I hope to be able to do with the rest of the blog, and while I was doing it I came across an article in my feed about how Michelle Barker has been using blockquotes wrong, which in turn led me to wonder if I was doing the same (answer: yes.)

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.

The article takes us down a rabbit hole to another article, this time by Heydon Pickering, titled "The blockquote element" in which interesting points are expressed about the history of the element and some of its most common problems, I summarize some of the most interesting points from my understanding.

#WHAT IS A BLOCKQUOTE?

I think the main problem Heydon mentions, the same one Michelle has committed in the past and of which I have been guilty at the same time, is simply not having a clear idea of what a blockquote is, which itself leads us to its incorrect use. No matter how hard you hit a nail with the wrench, it's still not a hammer.

The original intention of the <blockquote> element is to quote text from another source, and it is not uncommon to see quotes from an article cited in the same article, which is wrong.

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

#BLOCKQUOTE VS PULL QUOTE

This is where our second main actor comes in, the Pull quotes, which for a change also has no literal translation (and whose concept I have found very difficult to find in Spanish).

A pull quote refers to pulling a part of the article being written to highlight it within the same article, this is the main difference between pull quotes and blockquotes, more than design or positioning of the quote, it is about the source of the quote (external vs internal).

These are quite common in magazines, due to several factors, among them, that magazines have pages. It is not uncommon to take quotes from the same article from some previous page to emphasize a more advanced point in the article, this does not happen on the web because nowadays web articles only occupy one page, since there is no limit to how much you can scroll.

Another important reason why pull quotes are used in magazines is that magazine articles usually have unique designs for them, because they will only be printed on paper consistency tends to be less important, and the resources to design them tend to be less (it is not necessary a whole team of designers and programmers to build the page where they will be printed). Therefore you can take a quote from the article to easily emphasize it on the same page.

These are not determining factors on a website, so it should be rare to see pull quotes in the same way we see them in magazines. However, for aesthetic reasons more than anything else, it is common to see them.

So…

#HOW TO USE BLOCKQUOTES IN HTML?

Once we have understood (a little) the point of the element, we can deduce that outside of any aesthetic situation, <blockquote> serves us when we want to quote some external text to our article, for example:

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

Keeping the source outside the quote makes sense, but I can't help but feel disconnected… As if both don't belong together, Heydon thinks the same, so he has proposed a solution using <figure> and <figcaption> to complement them:

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

You can see how we still use the <cite> element, but now everything feels like part of the same block, personally, I like it.

#CONCLUSION

Many years ago, while trying to create the most semantic site in existence, I discovered that there are many small details that make the task difficult, likewise many elements have room for interpretation, not everything in the specification is as simple as yes and no. The important thing, in my opinion, is that your site works, (and that it is accessible.)

So, in the end. Just make your users comfortable ☺️️.