Quotes, code, and line breaks

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.

Notice the difference between code and pre. Inline code marks a short identifier inside a sentence. pre keeps every space and newline exactly as you typed them, which is what you want for a multi-line snippet.

If you paste code from an editor, escape < and > inside code blocks so the browser does not treat them as tags. The examples above use < and > for that reason.

For a long quote with a known author, you can add a cite element inside blockquote:

<blockquote cite="https://example.com/source">
  <p>Quote text here.</p>
  <cite>Author name</cite>
</blockquote>

The cite URL is metadata. It does not have to be a link visitors click.

Avoid nested blockquote elements unless the source quote itself contains a quotation. One level is easier to read and style.

HTML comments are not a place to hide secrets. Anyone can read them in View Page Source.

Quick check

Start quiz

Result

You got of right.

Try again