Blockquotes & Preformatted

Difficulty: Beginner

HTML provides dedicated elements for quoting content from other sources and displaying preformatted text like code snippets. Using these elements correctly is important for both semantic accuracy and proper visual presentation. They tell browsers and assistive technologies that certain content is a quotation or should preserve its exact formatting.

The <blockquote> element is used for long quotations that are typically displayed as an indented block. It should be used when quoting a substantial passage from another source - a paragraph or more. The cite attribute can specify the URL of the source. Inside a <blockquote>, you can use any block-level elements like <p>, <h2>, etc. For short inline quotations within a sentence, use the <q> element instead, which automatically adds quotation marks around the content in most browsers.

The <cite> element (not to be confused with the cite attribute) is used to reference the title of a creative work - a book, article, movie, song, or similar. It renders in italics by default. You can combine <blockquote> with <cite> to provide proper attribution: the <blockquote> contains the quoted text, and a <cite> element references the source. Note that <cite> should contain the title of the work, not the author's name (though this convention is debated).

The <pre> element preserves all whitespace and line breaks exactly as they appear in the HTML source code. Normal HTML collapses whitespace, but <pre> disables this behavior. It uses a monospace font by default. The <pre> element is essential for displaying code snippets, ASCII art, or any text where exact formatting matters. It is almost always paired with the <code> element when showing programming code: <pre><code>your code here</code></pre>.

Several related elements help display computer-related content semantically. The <code> element marks inline code or code snippets - variable names, function calls, file names, etc. The <kbd> element represents keyboard input, showing users what keys to press. The <samp> element represents sample output from a computer program. These elements all render in a monospace font by default but carry different semantic meanings. Using them correctly helps screen readers convey the nature of the content - for example, a screen reader can announce <kbd> content as keyboard input.

Code examples

Blockquotes and Citations

<!-- Long quotation with attribution -->
<blockquote cite="https://www.w3.org/">
  <p>The power of the Web is in its universality.
     Access by everyone regardless of disability
     is an essential aspect.</p>
</blockquote>
<p>-- <cite>Tim Berners-Lee, W3C Director</cite></p>

<!-- Inline quotation with <q> -->
<p>As the saying goes, <q>practice makes perfect</q>,
   which is why exercises are so important in learning HTML.</p>

<!-- Nested blockquote -->
<blockquote>
  <p>In their review, the author noted:</p>
  <blockquote>
    <p>This book changed the way I think about web design.</p>
  </blockquote>
</blockquote>

Use <blockquote> for long quotes from external sources and <q> for short inline quotes. The <cite> element references the title or source of the work. The cite attribute on blockquote holds the source URL.

Preformatted Text and Code

<!-- Code block with <pre> and <code> -->
<h3>JavaScript Example</h3>
<pre><code>function greet(name) {
    if (!name) {
        return "Hello, stranger!";
    }
    return `Hello, ${name}!`;
}</code></pre>

<!-- HTML code display (entities for angle brackets) -->
<h3>HTML Example</h3>
<pre><code>&lt;div class="container"&gt;
  &lt;h1&gt;Title&lt;/h1&gt;
  &lt;p&gt;Content goes here.&lt;/p&gt;
&lt;/div&gt;</code></pre>

<!-- ASCII art preserved -->
<pre>
  /\_/\
 ( o.o )
  > ^ <
 /|   |\
(_|   |_)
</pre>

The <pre> element preserves whitespace and line breaks. When showing HTML code, use < for < and > for > so they are displayed literally instead of being parsed as tags.

Inline Code, Keyboard, and Sample Output

<!-- Inline code -->
<p>Use the <code>document.getElementById()</code> method to select elements by their ID.</p>

<p>Install the package by running <code>npm install express</code> in your terminal.</p>

<!-- Keyboard input -->
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> to open developer tools.</p>

<!-- Sample output -->
<p>The program will display: <samp>Build completed successfully.</samp></p>

<!-- Combining code and output -->
<p>Running <code>node --version</code> outputs: <samp>v20.11.0</samp></p>

Use <code> for code references, <kbd> for keyboard keys the user should press, and <samp> for program output. All three render in monospace but carry different semantic meanings.

Combining Quotes and Code

<!-- Technical documentation with quotes and code -->
<blockquote cite="https://developer.mozilla.org">
  <p>The <code>&lt;pre&gt;</code> element represents
     preformatted text which is to be presented exactly
     as written in the HTML file.</p>
</blockquote>
<p>-- <cite>MDN Web Docs</cite></p>

<!-- FAQ style with definition list and quotes -->
<dl>
  <dt>How do I center a div?</dt>
  <dd>
    <p>Use Flexbox on the parent:</p>
    <pre><code>.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}</code></pre>
  </dd>
</dl>

HTML elements can be combined freely. Here a blockquote contains inline <code>, and a definition list contains a <pre><code> block for a technical answer.

Key points

Use <blockquote> for long quotations from external sources. Use <q> for short inline quotations.
The <cite> element is for titles of works (books, articles, films), not for author names.
Always pair <pre> with <code> when displaying programming code. Use <pre> alone for other preformatted text like ASCII art.
When displaying HTML code inside <pre><code>, use < and > for angle brackets so they are not parsed as actual tags.

Concepts covered

blockquote, cite, q, pre, code, kbd, samp, Quoting Content, Code Display