Michael Gearon

The Block Quotation element

Michael Gearon

The block quotation HTML element (<blockquote>) is a way to define an extended quotation. By default the browser, or the user-agent stylesheet, indents the quotation to make it separate from the content around it, taking it out of the main content flow. The difference between the inline quotation (<q>) and a blockquote (<blockquote>) is that we should use a blockquote when the quotation is over multiple lines.

Attribute
There is a single attribute you can use with the blockquote element which is the cite attribute. This is a way to define where the quote has come from and link to that source.

The different quotations

When we write our HTML we have got three options to mark up a quote, the <blockquote>, <q> and <cite> tags. They have slightly different uses, the blockquote is a large quotation, and can have further structure placed within the blockquote such as headings and paragraphs.

For small, inline quotations we want to use the <q> tag, which we can also then style in CSS to make the appearance slightly different to the content around the inline quote. If you’re stuck on deciding if something is a quote or blockquote a good rule of thumb is that if the quote is longer than 40 words then separate it out as a block.

The <cite> tag is a way to make an inline citation or reference to another source. If you are using the <cite> tag with a blockquote then place the citation element within the blockquote, not after the closing of the blockquote.

Styling a blockquote

Blockquotes can be styled in all sorts of ways, with quotes, lines, boxes and much more, there is a real variation in quotes between websites.

The main objective though is to make sure to the reader there is a clear difference between the website content and quotes from other sources. The use of multiple line quotes should also be used sparingly, it could become quite distracting switching from indented and not indented content.

The most simplest way to make the visual difference is by slightly indenting the quote. Other ways you could do it is by setting it to italics or centering the content. This is not great practice though as italics and centering large pieces of content can be hard to read, especially for those users who have visual disabilities.

Another option is quotes or lines with indentation. Using quotation marks makes a lot of sense as this is a clear way to indicate someone is saying something. There are lots of ways to style the quotation marks, sometimes the left (or the opening) quote is large, a distinctive colour whilst the right one is in a normal format, sometimes they are both heavily styled. There are lots of options to style quote marks.

Lines have also become quite popular, perhaps it is a more minimalist appearance but a simple line again in a contrasting colour and sometimes with a light grey background can make the blockquote stand out more.

However we style our quote we need to make sure that when placing content inside a blockquote it is for semantic reasons first, not just because of its styling purposes. When thinking about screen readers and other tools that consider both content and purpose they translate that into meaning, so if you’re relying on a screen reader then you’re looking for meaning behind the content.

The American Psychological Association (APA) has some guidelines on how to format block quotes when writing research papers.

Summary

  • <blockquote> is used when we have a quote that last multiple lines, about 40 words or more
  • We can use other HTML elements like headers, footers and paragraphs within a blockquote to give it more structure
  • Quotes can be styled in lots of different ways such as quotation marks, lines, indentation and background colours
  • When using the blockquote element it should be for semantic reasons first, not just because visually we want to give it a distinctive look

More HTML tutorials

Michael Gearon

Written by

Michael Gearon

Senior Interaction Designer and Co-Author to Tiny CSS Projects