<pre> / <blockquote> / <hr>

pre represents preformatted text (whitespace and line breaks are displayed as-is), blockquote represents a block of content quoted from another source, and hr represents a thematic break between paragraphs, rendered as a horizontal rule.

Syntax

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

quoted text

Attributes

Tag / Attribute	Description
pre	Displays text with whitespace and line breaks preserved. Rendered in a monospace font.
blockquote	Represents block-level content quoted from another source.
blockquote[cite]	Specifies the URL of the original source. Not displayed in the browser, but included as machine-readable metadata.
hr	Renders a horizontal rule representing a thematic break between paragraphs. No closing tag is required.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>

  <!-- Example: using pre as a code block -->
  <p>Here is a sample CSS snippet.</p>
  <pre>
body {
  font-size: 1rem;
  color: #333;
}

The following is quoted from Wikipedia.

HTML (HyperText Markup Language) is a language used to describe the structure of web pages.

Result

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.

body {
  font-size: 1rem;
  color: #333;
}
────────────────────────────────
  HTML (HyperText Markup Language) is a language
  used to describe the structure of web pages.

Notes

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.