Text and meaning

Quotes, code, and line breaks

Represent quotations, code, preserved whitespace, and intentional line breaks with elements made for those kinds of content.

7 minute lesson

~~~

Use blockquote for a quotation that forms its own block:

<blockquote>
  <p>The bicycle is a simple solution to some of the world's most complicated problems.</p>
</blockquote>

Use q for a short quotation inside a sentence:

<p>The guide called this route <q>the quiet way into town</q>.</p>

Use code for computer code:

<p>The page starts with the <code>&lt;!doctype html&gt;</code> declaration.</p>

For a block of code, combine pre and code:

<pre><code>&lt;h1&gt;Hello&lt;/h1&gt;
&lt;p&gt;Welcome to my page.&lt;/p&gt;</code></pre>

pre preserves spaces and line breaks. Normal HTML collapses sequences of whitespace into a single space.

The br element creates a line break within content where the break is meaningful, such as an address or a poem:

<p>
  42 Harbor Street<br>
  Copenhagen
</p>

Do not use a row of br elements to create vertical spacing. That is a presentation decision for CSS.

You can leave comments for yourself or other developers:

<!-- Replace this copy before launch -->

Comments do not appear in the rendered page, but they are visible in the source.

Quick check

Result

You got of right.

Lesson completed