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><!doctype html></code> declaration.</p>
For a block of code, combine pre and code:
<pre><code><h1>Hello</h1>
<p>Welcome to my page.</p></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