HTML Academy · Lesson

br hr blockquote and pre

Control line breaks, thematic breaks, quotes, and preformatted text.

br hr blockquote and pre is a free HTML Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The br Element

The   element inserts a line break within text content:

<p>221B Baker Street<br>
London, NW1 6XE<br>
United Kingdom</p>
<!-- Good use: addresses, poetry, lyrics -->
<!-- Bad use: spacing paragraphs — use margin/padding instead -->

When to Use br

Use   only when line breaks are part of the content:

Postal addresses
Poetry with specific line breaks
Song lyrics

Do not use   to add visual spacing between paragraphs — that is a CSS job.

The hr Element

The <hr> element represents a thematic break between content:

<p>Chapter One begins here and introduces the characters.</p>

<hr>

<p>Chapter Two starts a new scene entirely.</p>
<!-- hr = thematic shift in content, not just a visual line -->
<!-- Style with CSS: border, color, margin -->

Styling hr with CSS

<hr> can be fully styled:

<hr style="border: none; border-top: 2px solid #e0e0e0; margin: 2rem 0;">

<!-- Or in CSS: -->
<!--
hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 1.5rem 0;
}
-->

The blockquote Element

<blockquote> marks a section quoted from another source:

<blockquote cite="https://example.com/article">
  <p>The best time to plant a tree was 20 years ago.
     The second best time is now.</p>
</blockquote>
<p>— Chinese Proverb</p>
<!-- cite attribute = URL of the source (machine-readable) -->
<!-- cite element inside blockquote = visible attribution -->

Inline Quotations with q

For short inline quotes, use <q> instead of <blockquote>:

<p>She said <q cite="https://example.com">the meeting is at noon</q>.</p>
<!-- Browser adds quotation marks automatically -->
<!-- blockquote = block-level, full quote -->
<!-- q = inline, short quote within a sentence -->

The pre Element

<pre> renders text in a fixed-width font and preserves whitespace exactly:

<pre>
function hello() {
    console.log("Hello!");
}
</pre>
<!-- Spaces, tabs, and newlines are preserved -->
<!-- Default font: monospace -->
<!-- Used for code, ASCII art, or text that depends on spacing -->

pre and code Together

Combine <pre> and <code> for code blocks:

<pre><code>
const greet = (name) => {
  return `Hello, ${name}!`;
};
console.log(greet("World"));
</code></pre>
<!-- pre = preserves whitespace -->
<!-- code = semantic: this is computer code -->
<!-- syntax highlighting libraries like Prism target pre > code -->

Escaping in pre

Special HTML characters inside <pre> must still be escaped:

<pre><code>
<!-- These must be escaped: -->
&lt;div class="box"&gt;
  &lt;p&gt;Content&lt;/p&gt;
&lt;/div&gt;
<!-- &lt; = <   &gt; = >   &amp; = & -->
</code></pre>

Whitespace Collapsing

Normal HTML collapses whitespace — multiple spaces and newlines become one space:

<p>This    has    extra    spaces.</p>
<!-- Renders as: "This has extra spaces." -->

<pre>This    keeps    all    spaces.</pre>
<!-- Renders exactly as written -->

<!-- To preserve whitespace in p without pre: CSS white-space: pre -->
<p style="white-space: pre-wrap">Preserved&#10;newlines</p>

Summary of Whitespace Elements

Quick reference:

  — inline line break (addresses, poetry)
<hr> — thematic section break
<blockquote> — block-level quotation
<q> — inline quotation
<pre> — preformatted text, preserves whitespace
<code> — inline code snippet

Quick Check

Which element preserves all whitespace including spaces and newlines exactly as written?

Recap: br hr blockquote pre

Whitespace and quotation elements:

  — line break within content (not for spacing)
<hr> — thematic content break (semantic, not just visual)
<blockquote cite> — block quotation with source
<q> — inline quotation
<pre><code> — formatted code blocks

Frequently asked questions

Is the “br hr blockquote and pre” lesson free?

Yes — the full text of “br hr blockquote and pre” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “br hr blockquote and pre”?

Control line breaks, thematic breaks, quotes, and preformatted text. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “br hr blockquote and pre” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy