Quotations, Code and Preformatted Text

Concept

Two families of elements that beginners often replace with a styled div: those that mark quoted material, and those that mark technical text. Both add meaning a stylesheet cannot, and both are trivial to use.

Quotations

blockquote

An extended quotation set off as its own block. The optional cite attribute holds a URL pointing at the source.

<figure>
  <blockquote cite="https://example.org/reports/2026-transport">
    <p>Bus ridership recovered faster than any other mode, and did so
       without any increase in fares.</p>
  </blockquote>
  <figcaption>
    District Transport Review, <cite>Annual Report 2026</cite>
  </figcaption>
</figure>

The URL in the cite attribute is not displayed by any browser, so a visible attribution needs its own markup. Wrapping the quote in a figure with a figcaption is the standard way to attach one, because the attribution is not itself part of the quotation.

q

A short inline quotation. The browser inserts the quotation marks itself, choosing the correct pair for the language.

<p>The notice said <q>services resume at six</q>, which turned out to be optimistic.</p>

Do not type quotation marks around a q. You will get two sets.

cite

The title of a work: a book, a film, a report, a paper, a song, a piece of software. Not the name of a person - that is a common misreading of the element.

<p>The argument is developed at length in <cite>The Fare Trap</cite>.</p>

abbr

An abbreviation or acronym, with the expansion in the title attribute.

<p>The <abbr title="Municipal Transport Authority">MTA</abbr> publishes figures yearly.</p>

Because title is not reachable by keyboard or touch, the expansion should also appear in the text on first use. Write it out in full the first time and abbreviate afterwards.

Technical text

code

A fragment of computer code: a function name, a file name, a property, a command.

<p>Set the <code>loading</code> attribute to <code>lazy</code>.</p>

pre

Preformatted text. This is the one element where whitespace is preserved exactly: every space, every tab, every newline. It is the exception to the collapsing rule.

For a code block, nest code inside pre. The pre preserves the layout; the code says it is code.

<pre><code>function total(items) {
  return items.reduce((sum, n) =&gt; sum + n, 0);
}</code></pre>

Note two details. The opening <code> sits immediately after <pre> with no newline, because a newline there becomes a blank first line. And every < and & inside the block must be escaped as < and & - otherwise the browser reads them as markup and your example disappears into the DOM.

kbd and samp

kbd is input the user types; samp is output a program produced.

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>The build printed <samp>2 files changed</samp> and exited.</p>

Escaping: the rule that catches everyone

Three characters cannot appear literally in HTML text. Showing markup on a page is impossible without them.

Escape the ampersand first when doing this by hand, or you will double escape everything that follows.

Important rules

• blockquote is block level and should contain block content such as paragraphs; q, cite, abbr, code, kbd and samp are inline.
• The cite attribute is never displayed. The cite element is displayed. They are unrelated things with the same name.
• pre is the only common element that preserves whitespace.
• The attribution to a quotation belongs outside the blockquote, because the attribution is not part of what was said.
• Do not add your own quotation marks around q.

Common mistakes

• Using blockquote to indent text that is not a quotation. Indentation is margin.
• Putting the attribution inside the blockquote, which makes it look as if the source quoted its own name.
• Forgetting to escape < in a code sample and losing the whole example.
• Using cite for the name of the person who said something.
• Relying only on abbr title for an expansion no touch user will ever see.
• Starting a pre block with a newline and shipping a stray blank line.

Best practices

• Pair pre with code for every code block, and add a language hint such as class="language-js" for highlighters.
• Give long code blocks overflow-x: auto so they scroll inside their own box instead of stretching the page on a phone.
• Expand an abbreviation in the text on first use, then use abbr for later occurrences.
• Wrap a quotation and its attribution in a figure so they stay associated.
• Always fill in the cite attribute when the source has a URL. It costs nothing and machines can read it.

Practice

1. Mark up a quotation of two paragraphs with a visible attribution and a source URL, without putting the attribution inside the quote.
2. Display <a href="/x">Link</a> on a page as visible text. Which characters did you have to escape?
3. Write instructions containing a keyboard shortcut, a file name and a line of program output, using the correct element for each.
4. Explain the difference between the cite element and the cite attribute in one sentence.