<pre> / <blockquote> / <hr>

<!-- pre tag: whitespace and line breaks are preserved -->
<pre>
  preformatted
    text

quoted text

sample_pre_blockquote_hr.html

<!-- pre alone: preserves whitespace and line breaks -->
<pre>
  Name: Okita Sougo
  Rank: First Division Captain
  Age:  18
</pre>

<!-- pre + code: the standard way to display a code block -->
<p>Here is a sample CSS snippet.</p>
<pre><code>body {
  font-size: 1rem;
  color: #333;
}</code></pre>

<!-- hr separating two topics -->
<p>Content from the previous section.</p>
<hr>
<p>A new topic starts here.</p>

<!-- blockquote: cite attribute points to the original source -->
<p>The following is quoted from Wikipedia.</p>
<blockquote cite="https://en.wikipedia.org/wiki/HTML">
  HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser.
</blockquote>

<!-- blockquote + footer: practical pattern for citing the source -->
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML">
  <p>HTML is used to give meaning and structure to web content.</p>
  <footer>— <cite><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN Web Docs</a></cite></footer>
</blockquote>

Text inside pre is displayed in a monospace font with all whitespace and line breaks preserved. hr appears as a single horizontal line. blockquote is indented on both sides by default.

View sample page

Use pre for content where whitespace layout is meaningful, such as code snippets or ASCII art. On programming tutorial sites, it is common practice to nest code inside pre (e.g., <pre><code>...</code></pre>).

blockquote is a semantic element for marking up quoted content. Avoid using it purely for layout purposes, such as adding indentation. To attribute the source inline on the page, consider combining it with figure and figcaption, or with the cite element.

hr was historically a visual element used to draw a horizontal line, but since HTML5 it has been redefined as a semantic element representing a thematic break between paragraphs. If you only need a decorative dividing line, consider using the CSS border property instead.

Desktop

Chrome

1 and later ○

Firefox

1 and later ○

Safari

4 and later ○

3 and earlier ×

Edge

12 and later ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

15 and later ○

14 and earlier ×

Mobile

iOS Safari

3.2 and later ○

Android Browser

4.4 and later ○

4 and earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

* Version data based on MDN.

The standard approach for displaying program code is to combine <pre> and <code>. <pre> handles the monospace, whitespace-preserving display, while <code> semantically marks the content as program code.

<!-- Combining pre and code -->
<pre><code>function greet(name) {
  return "Hello, " + name + "!";
}
console.log(greet("World"));
</code></pre>

When writing <pre><code>, be careful about the newline immediately after the opening tag. Since <pre> preserves whitespace, a newline right after the start tag will add an unwanted blank line at the top. Syntax highlighting libraries like Prism.js and highlight.js use this combination as their standard target.

<blockquote> is only indented by default, but CSS can dramatically improve the visual design of quoted content.

/* Style 1: Left border */
blockquote {
  margin: 1.5em 0;
  padding: 0.5em 1em;
  border-left: 4px solid #4488ff;
  background-color: #f0f4ff;
  color: #333;
}

/* Style 2: Add a quotation mark with a pseudo-element */
blockquote {
  position: relative;
  padding: 1em 1em 1em 3em;
  font-style: italic;
}

blockquote::before {
  content: '\201C'; /* Left double quotation mark */
  font-size: 4em;
  color: #ccc;
  position: absolute;
  top: -0.1em;
  left: 0.1em;
  line-height: 1;
}

/* Customize hr */
hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 2em 0;
}