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 applymargin-left
via CSS, 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