#30DaysofHTML Day 2: <blockquote> and <q>
Quotations inline and block
<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.
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?
👀 <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.)