“To teach how to live without certainty, and yet without being paralyzed by hesitation, is perhaps the chief thing that philosophy, in our age, can still do for those who study it.”

Part of the HTML Typography & Writing reading list

Frequently ignored and often abused, the <blockquote>, <cite> and <q> elements can contribute greatly to creating a semantically and typographically rich page if they are used correctly.

The most important thing to remember about all three elements is that they demark words or works related to the page content, but outside the current context. That is, <blockquote>, <cite> and <q> almost always contain content from other people.

Blockquote

A <blockquote> element contains an extended quotation as a block element. For example: 

<blockquote>
“To teach how to live without certainty, and yet without being 
paralyzed by hesitation, is perhaps the chief thing that philosophy, 
in our age, can still do for those who study it.”
</blockquote>

A few things to note:

  • The <blockquote> element does not automatically create quotation marks around its content: if you need them, you must add them yourself, either as characters, HTML entities, or generated content.
  • By default, <blockquote> pushes its content in from the left and right when displayed in a browser. For this reason, it is often used as a general “indentation” code. Needless to say, you shouldn’t do this: if you want to control indentation on an element, simply apply margin-left via , not a <blockquote> tag.
  • <blockquote> can be used to quote text content that is already on the page, in the form of a pullquote.
  • traditionally <blockquote> required its text content to be surrounded by a <p> tag. This requirement was dropped in HTML5, but the practice is still useful (see below).

Adding Information

A blockquote does not automatically attribute its content. You can add this information in several ways: first, as a <cite> attribute. 

<blockquote cite="https://archive.org/stream/westernphilosoph035502mbp/westernphilosoph035502mbp_djvu.txt">
“To teach how to live without certainty, and yet without being 
paralyzed by hesitation, is perhaps the chief thing that philosophy,
in our age, can still do for those who study it.”
</blockquote>

Unfortunately, no browser that I’m aware of currently uses the cite attribute in any practical way.

Alternatively, an attribution can be added as a <footer> and / or <cite> element inside the <blockquote>: 

<blockquote>
    <p>“To teach how to live without certainty, and yet without being
     paralyzed by hesitation, is perhaps the chief thing that philosophy, 
     in our age, can still do for those who study it.”</p>
    <footer>
        <p>― Bertrand Russell, A History of Western Philosophy</p>
    </footer>
</blockquote>

Usually the book or author would be surrounded by a hyperlink, allowing the reader to find more information if they wanted to.

q

Intended for a short, inline quotation that does not require a line break. For example: 

<p>As Voltaire said: <q>Every man is a creature of the age in which he lives
and few are able to raise themselves above the ideas of the time.</q>

<q> automatically generates the correct opening and closing “curly” quote marks for content in English. Other languages use different conventions, which may not be supported in all browsers. For example, a German quotation: 

<html lang="de">
<p>Wie Goethe sagte: <q>Man sieht nur das, was man weiß.</q>

Should be presented with German quote conventions: Man sieht nur das, was man weiß.. Modern Webkit-based browsers do this correctly, but Firefox currently does not. This can be fixed with a style declaration: 

:lang(de) > q { quotes: "„" "“" "‚" "‘" }

Two notes:

  • it’s important to remember that <q> is intended for outside sources: it shouldn’t be used to denote general dialogue on a page, turns of phrase, etc.
  • As with <blockquote>, cite can be used as an attribute in the <q> tag to provide a URL for more information.

cite

Rather confusingly, cite is one of the few words in HTML that is both an attribute and a tag. As an element, it is used a reference to a creative work, such as a book, movie, television show, stage production, music album, or software application. (<cite> might be also be used with microdata to provide more information about a work.) 

<p>Like many thick tomes, <cite>Atlas Shrugged</cite> exists on the 
shelf of most readers as a book to be bragged about, rather than one to 
be read or analysed.

Visually, <cite> italicizes the text content within it, although it should never be used for solely that purpose (use <em> or <i> instead). <cite> contains the name of a work, author, referenced URL (when it is made visible, rather than as the href value of a link). For our first example, <cite> could be used this way: 

<blockquote>
    <p>“To teach how to live without certainty, and yet without being
     paralyzed by hesitation, is perhaps the chief thing that philosophy, 
     in our age, can still do for those who study it.”</p>
    <footer>
        <p>― Bertrand Russell, 
        <cite>A History of Western Philosophy</cite></p>
    </footer>
</blockquote>

Conclusion

The <blockquote>, <cite> and <q> elements are very useful… especially if they are used for the purposes for which they were intended. Together with the other HTML writing elements, you have a full and rich set of markup elements with which to start treating your content.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/RWbLOR