#30DaysofHTML Day 2: <blockquote> and <q>

Quotations inline and block

and

Apr 02, 2021

<blockquote> is for block-level quotes, while <q> is used for inline quotes. Optionally, these may be paired with either a <cite> element or a cite attribute. (We'll cover <cite> and cite tomorrow, Day 3.)

In other words, a longer quote goes in a <blockquote> element, while <q> marks shorter passages.

👀 Sounds easy, but it's not as straightforward as you think.

Who said what from where: address, blockquote, q, and cite.

When to use <blockquote>

✅ You're quoting an extended passage from a book, article, website, or some other work. By making this passage stand alone, it's clear that this is something you are quoting, not something that you originally wrote.

✅ You're quoting what someone said as a report, not as a conversation.

✅ Somewhere, there's a citation that could go with this.

When to use <q>

🏁 You're quoting a short passage from a book, article, website, or another work. Typically this is a few words or a line or two. Anything longer should probably use <blockquote>.

🏁 It's not a conversation.

🏁 There's a citation that could go with it.

When not to use <blockquote> or <q>

⛔️ Dialog - if it's a conversation, it's not a quote.

⛔️ Sarcasm or "air quotes" - there is a double quote key on your keyboard for these. It's not just for "code."

❌ ❌ ❌ PLEASE do not use <blockquote> for indents. CSS is made for indents. Use it.

⛔️ Likewise, do not use <q> in particular for conversations. It has built-in curly quotes before and after your quotation. They're pretty and tempting. But they are not for your conversation.

⛔️ Did I mention that <q> is not for conversations?

Common attributes

👀 <cite> and the cite attribute are commonly associated with these elements, for obvious reasons. Your original thoughts or writing are not included in <blockquote> and <q>. Therefore, a citation is appropriate. (We'll cover <cite> and cite tomorrow, Day 3.)