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.

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

Take this course offline

Get every free book, course edition, and software download.

Get the download library →