Chapter 08 — Web Typography

Quotation and Citation

Chapter 07 ended on a pattern: the element you choose is a claim about what the content means. Quotation markup is where that claim gets ignored most often. <blockquote> and <cite> both have a default appearance that has very little to do with their actual definition, and that gap is where the misuse lives. People reach for <blockquote> because it indents, and for <cite> because it italicizes. Neither element is a styling shortcut, and using them as one is the same mistake as picking <h3> because you want smaller text.

What <blockquote> actually marks

A <blockquote> marks a section of content quoted from another source. That is the entire definition. The content came from somewhere else, and the element says so.

It is not a visual indentation device. It is not a pull quote style. It is not a way to put a left border on a callout box. Browsers do indent <blockquote> by default, which is exactly why the confusion exists, but the indentation is a default rendering, not the meaning. If you have a paragraph you want set apart visually and it isn’t quoted from another source, <blockquote> is the wrong element. Style a regular element instead.

The cite attribute belongs here, and it trips people up because of its name. Written lowercase on the element, <blockquote cite="https://...">, it takes a URL pointing to the source the quote came from. It is metadata. Browsers do not display it. It exists for parsers and tools to read, not for humans looking at the page. The cite attribute is not how you credit the person who said the thing. It points at a document, not a name.

The <cite> element marks titles, not names

<cite> is a separate thing from the cite attribute, and it has a narrow job: it marks the title of a creative work. A book, a film, an article, a song, a poem, a website, a research paper. The title of the work, and nothing else.

The HTML spec is unusually direct about what it is not for: “A person’s name is not the title of a work — even if people call that person their favorite author — and the element must therefore not be used to mark up people’s names.”

So this is wrong:

html~/tutorials/
<cite>Albert Einstein</cite>

A person is not a title. And this is correct:

html~/tutorials/
<cite>Thinking, Fast and Slow</cite>

The reason this gets violated constantly is the default styling. Browsers render <cite> in italic, and italic is how a lot of people format a name in an attribution line. So <cite> gets grabbed as an italics shortcut. The italics are the default rendering. They are not the definition, and a name in italics is still a name, not a title.

<q> for inline quotations

<blockquote> is for quoted content that stands as its own block. <q> is its inline counterpart, for a short quotation that sits inside a sentence. The browser is supposed to add the quotation marks for you, drawn from the quotes CSS property, which means you write the element without typing the quote characters yourself.

html~/tutorials/
<p>She described the redesign as <q>overdue by about three years</q>.</p>

In practice <q> is underused. Most developers type the quotation marks straight into the text and skip the element. That works, and it isn’t a sin, but <q> carries the same semantic value <blockquote> does, and it takes the same cite attribute for a source URL. Worth knowing it exists.

The attribution mistake, and the fix

Here is the pattern you will see most often, and it is wrong:

html~/tutorials/
<blockquote>
  <p>The only way to do great work is to love what you do.</p>
  <cite>— Steve Jobs</cite>
</blockquote>

Two problems. First, <cite> wraps a person’s name, and <cite> is for titles of works. Second, the attribution sits inside the <blockquote>, which means it is being marked as part of the quoted content. Steve Jobs did not say “Steve Jobs” as part of the quote. The attribution is about the quote, not part of it.

The fix uses <figure> and <figcaption>:

html~/tutorials/
<figure>
  <blockquote>
    <p>The only way to do great work is to love what you do.</p>
  </blockquote>
  <figcaption>Steve Jobs</figcaption>
</figure>

The <blockquote> now holds only the quoted words. The <figcaption> holds the attribution, and it sits outside the quote where it belongs. If you want to name the source work as well, that is where <cite> finally earns its place:

html~/tutorials/
<figure>
  <blockquote>
    <p>The only way to do great work is to love what you do.</p>
  </blockquote>
  <figcaption>Steve Jobs, <cite>Stanford Commencement Address</cite></figcaption>
</figure>

<cite> wraps the speech, which is a creative work with a title. It does not wrap “Steve Jobs,” because that is a name. Every element is now doing its actual job.

This matters past pedantry. A screen reader announces <blockquote> content as a quote, and <figcaption> as the caption for the figure. Pairing <figure> with <figcaption> builds an explicit relationship between the quoted words and their source that no other arrangement of these elements produces. The attribution stays connected to the quote without being mistaken for it.

A note on pull quotes

One case that looks like a quotation but is not. A pull quote lifts a sentence already present in the article and sets it large somewhere on the page for visual emphasis. The text is not from an external source. It is from the same article, repeated.

That is not a <blockquote>. It is a decorative design element, so mark it as one: a <div> or <aside> styled to look the part. And because the sentence already exists in the running prose, add aria-hidden="true" so a screen reader does not read it to the user a second time.

html~/tutorials/
<aside class="pullquote" aria-hidden="true">
  The element you choose is a claim about what the content means.
</aside>

Quotation markup is one place where the same word does several jobs: the cite attribute, the <cite> element, the act of citing a person. Keeping them straight comes down to one question for each piece: is this quoted content, a URL to a source, the title of a work, or a person’s name. Answer it, and the element picks itself.

Chapter 09 stays with meaning over appearance, on a pair of elements that look identical and are not: <em> and <i>, <strong> and <b>, and what emphasis and importance actually mark.