Lesson 1, Topic 1

In Progress

Lesson 2.11: br, hr and pre

Lesson 2.11 – <br>, <hr> & <pre> | Knowledge Pillars HCCS

Lesson Objectives

Use <br> to insert a single line break within a block of text — and know when not to use it
Add a <hr> horizontal rule to visually separate sections of content
Style <hr> with CSS: change thickness, color, width, and style
Use <pre> to display preformatted text that preserves all spaces and line breaks exactly as typed
Combine <pre> with <code> to display code samples on a webpage
Understand when each element is appropriate — and when to use CSS or semantic HTML instead

Part 1: <br> — The Line Break Element

The <br> element inserts a single line break — moving the following content down to the next line without starting a new paragraph. Unlike most HTML elements, <br> is a void element — it has no closing tag and no content between tags.

Syntax

Written as <br> — no closing tag needed.

In older XHTML you may see <br /> — both are valid in HTML5, but <br> is preferred.

Best Use Cases

Poetry, song lyrics, addresses, and anywhere a line break is part of the meaning of the content — not just a visual styling choice.

What It Is NOT For

Creating space between paragraphs or sections. Use separate <p> tags and CSS margin for spacing — not stacks of <br><br><br>.

Example — Poem or Address

<p>
  Knowledge Pillars Academy<br>
  123 Web Design Lane<br>
  Sebastian, FL 32958<br>
  United States
</p>
      

Rendered Output

Knowledge Pillars Academy
123 Web Design Lane
Sebastian, FL 32958
United States

❌ Misusing <br> for spacing

<h2>About Me</h2> <br><br><br> <p>I love coding.</p> <br><br> <h2>My Skills</h2> /* Using br for visual gaps — this is a spacing concern, not a content concern. */

✅ Use CSS margin instead

<h2>About Me</h2> <p>I love coding.</p> <h2>My Skills</h2> /* CSS */ h2 { margin-top: 32px; } p { margin-bottom: 16px; } /* Spacing belongs in CSS ✓ */

💡 The Simple Test: Ask yourself — "Is this line break part of the meaning of my content, or am I just trying to add visual space?" If it's meaning (a poem, an address, song lyrics), use <br>. If it's just spacing, use CSS margin or padding.

Part 2: <hr> — The Horizontal Rule

The <hr> element draws a horizontal line across the page, visually separating two sections of content. Like <br>, it is a void element with no closing tag. In HTML5, <hr> carries semantic meaning — it represents a thematic break between content, not just a decorative line.

<section>
  <h2>About Me</h2>
  <p>I'm a web design student learning HTML and CSS.</p>
</section>

<hr>  <!-- thematic break between sections -->

<section>
  <h2>My Projects</h2>
  <p>Here's what I've been building...</p>
</section>
      

Rendered Output

About Me

I'm a web design student learning HTML and CSS.

My Projects

Here's what I've been building...

Styling <hr> with CSS

The default <hr> is a thin gray line — but CSS lets you transform it completely. Always set border: none first to remove the default border, then add your own styling:

Default

/* browser default */ hr { }

Thick & colored

hr { border: none; border-top: 4px solid #0a2463; }

Dashed

hr { border: none; border-top: 2px dashed #c49a00; }

Gradient

hr { border: none; height: 3px; background: linear-gradient( to right, #0a2463, #f5c400); }

♿ Accessibility Note: Because <hr> represents a thematic break, screen readers announce it to users as a separator. If you're using a decorative line purely for visual styling (like inside a card header), use CSS border-bottom on the element instead — keeping the semantic <hr> reserved for actual content breaks.

Part 3: <pre> — Preformatted Text

Normally, HTML collapses all whitespace — multiple spaces become one, and line breaks are ignored entirely. The <pre> (preformatted) element changes that behavior: it displays text exactly as it is typed, preserving every space, tab, and line break.

What it preserves

All whitespace — spaces, tabs, and newlines — is rendered exactly as typed. The browser will not collapse or reformat anything inside <pre>.

Default styling

Browsers render <pre> content in a monospace font (like Courier New) by default. You can override this in CSS.

Best use cases

Displaying code samples, ASCII art, terminal output, tabular plain text, or any content where exact spacing carries meaning.

The Whitespace Collapse Problem

❌ Without <pre> — spaces collapse

<p> Name: Alex Score: 98 Grade: A+ </p> /* Browser renders this as: "Name: Alex Score: 98 Grade: A+" — all on one line, spaces gone */

✅ With <pre> — spacing preserved

<pre> Name: Alex Score: 98 Grade: A+ </pre> /* Browser renders exactly: Name: Alex Score: 98 Grade: A+ ✓ */

👁️ Rendered Output — <pre>

Name:    Alex
Score:   98
Grade:   A+

Combining <pre> + <code> for Code Samples

The most common use of <pre> in real web projects is displaying code snippets. The best practice is to nest a <code> element inside <pre> — <pre> handles the formatting and <code> adds the semantic meaning that this is computer code.

<!-- Displaying HTML code as a sample on your page -->
<pre><code>
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</code></pre>
      

👁️ Rendered Output — <pre><code>

<h1>Hello, World!</h1>
<p>This is my first webpage.</p>

⚠️ Special Characters Inside <pre>: If your preformatted content contains <, >, or &, you must use HTML entities — <, >, and & — otherwise the browser will try to interpret them as actual HTML tags. This is why the code sample above shows <h1> in the source rather than <h1>.

Styling <pre> with CSS

/* Professional code block styling */
pre {
  background-color: #1a1a2e;
  color: #a8ff78;
  font-family: 'Courier New', monospace;
  font-size: .9rem;
  padding: 20px 24px;
  border-radius: 8px;
  overflow-x: auto; /* scroll if code is wide */
  line-height: 1.7;
}
      

💡 overflow-x: auto is an important detail when styling <pre>. Preformatted text does not wrap — a long line of code will extend past the container boundary. Adding overflow-x: auto gives the block a horizontal scrollbar instead of breaking your page layout.

Part 4: Choosing the Right Tool

These three elements are small and easy to misuse. Here's a quick reference to help you choose correctly every time:

Quick Reference — <br>, <hr>, and <pre>
Element	Use it when…	Don't use it when…
`<br>`	A line break is part of the meaning of the content (address, poem, lyrics)	You just want visual space between sections — use CSS `margin` instead
`<hr>`	There is a genuine thematic shift in content — a scene change, topic change, or section break	You want a decorative line inside a card or component — use CSS `border` instead
`<pre>`	Whitespace and line breaks are meaningful — code samples, ASCII art, terminal output	You want to indent or space text visually — use CSS `padding` and `margin` instead

🖥️ Code Skills Lab Reminder

💾 Save to Compile! As you work through today's activity in the Knowledge Pillars Code Skills Lab, press Ctrl + S (Windows) or Cmd + S (Mac) after each step. The Lab compiles on every save — watch the preview update in real time as you add each element!

Student Activity

📋 Apply It

Add <br>, <hr>, and <pre> to Your Webpage — Code Skills Lab

Open your index.html in the Code Skills Lab. You're going to practice all three elements on your personal webpage — using each one for its correct purpose.

Add a mailing address or contact block using <br>. Find your contact section (or create one). Format a name, address, or social media links using <br> so each piece of information appears on its own line within the same paragraph.
<section id="contact"> <h2>Contact Me</h2> <p> Jordan Rivera<br> jordan@example.com<br> Sebastian, Florida </p> </section>
💾 Save — each piece of contact info should appear on its own line!
Add a <hr> to separate two sections of your page. Choose two sections with a clear thematic shift between them — like "About Me" and "My Projects" — and place a <hr> between them.
</section>  <hr> <section id="projects"> <h2>My Projects</h2>
💾 Save — a horizontal line should appear between the two sections!
Style your <hr> with CSS. In your style.css, customize the horizontal rule to match your page's color scheme.
hr { border: none; border-top: 3px solid #0a2463; width: 80%; margin: 32px auto; }
💾 Save — your rule should now appear styled and centered!
Add a <pre><code> block to display a code sample. Add a new section to your page — perhaps a "What I'm Learning" or "Snippet of the Week" section — and use <pre><code> to display a small HTML or CSS snippet.
<section> <h2>Code I Learned This Week</h2> <pre><code> <a href="https://example.com"> Visit Example </a> </code></pre> </section>
💾 Save — your code snippet should appear formatted in a monospace font!
Style your <pre> block with CSS. Give your code block a dark background and light text to make it look professional.
pre { background-color: #1a1a2e; color: #a8ff78; padding: 16px 20px; border-radius: 8px; font-size: .9rem; overflow-x: auto; line-height: 1.7; }
💾 Final save — your code block should look polished and professional!

🌟 Bonus Challenges

Push your skills further:

1. Format a poem or song lyrics with <br> — add a short poem or your favorite song verse to your page, using <br> after each line and wrapping it in a <blockquote> for proper semantics:

<blockquote>
  <p>
    Roses are red,<br>
    Violets are blue,<br>
    I love writing HTML,<br>
    And CSS styling too.
  </p>
</blockquote>
        

2. Create a gradient <hr> — style your horizontal rule with a gradient using background instead of border-top:

hr {
  border: none;
  height: 3px;
  background: linear-gradient(to right, #0a2463, #f5c400);
  margin: 32px 0;
}
        

💾 Remember to save after each bonus step!

Troubleshooting Tips

Line break not working? Make sure you're using <br> — not <br/> or <break>. Also check it's placed inside a block element like <p>, not floating between block elements (use a new <p> tag for that instead).
Horizontal rule showing a double line? The default <hr> has its own border style that can appear doubled when you also add a CSS border. Always set border: none first, then apply your custom border-top or background styling.
<hr> not centered or wrong width? If you set width: 80%, make sure to also set margin: 0 auto (or margin: 32px auto) — width alone won't center it without the auto margins.
Code inside <pre> being interpreted as HTML? Any <, >, or & inside a <pre> block must be escaped as HTML entities: <, >, and &. Otherwise the browser will try to render them as actual tags.
<pre> content overflowing the page? Preformatted text doesn't wrap. Add overflow-x: auto to your pre CSS rule — this gives the block a scrollbar when the content is wider than the container, rather than breaking the page layout.
Unexpected indentation inside <pre>? Remember — <pre> preserves all whitespace, including the indentation in your HTML source file. If your <pre> content is indented in the editor, that indentation will appear on the rendered page. Left-align the content inside <pre> tags to avoid this.

Lesson Summary

Lesson 2.11 — <br>, <hr> & <pre> Reference
Element	Purpose	Key Notes
`<br>`	Inserts a single line break within content	Void element — no closing tag. Use only when the break is part of the content's meaning, not for visual spacing.
`<hr>`	Creates a thematic break — a horizontal rule between sections	Void element — no closing tag. Carries semantic meaning. Style with CSS: set `border: none` first, then customize.
`<pre>`	Displays preformatted text, preserving all spaces and line breaks	Renders in monospace by default. Use `overflow-x: auto` to handle wide content. Escape `<`, `>`, and `&` as entities.
`<pre><code>`	The standard pattern for displaying code samples on a webpage	`<pre>` handles whitespace/formatting; `<code>` adds the semantic meaning that this is computer code.
`overflow-x: auto`	CSS — adds a horizontal scrollbar to `<pre>` when content is wide	Prevents preformatted text from breaking the page layout on narrow screens.
HTML entities in <pre>	Escape special characters so they display as text, not HTML	`<` = `<` · `>` = `>` · `&` = `&`

Knowledge Check

Read each question carefully and select the best answer. Each question has one correct response.

1. You want to display a mailing address on your webpage with each line on its own line — Name, Street, City, State. Which element is most appropriate for the line breaks?

2. You notice your page has three <br><br><br> tags in a row between a heading and a paragraph just to add visual space. What is the correct fix?

3. You want your <hr> to appear as a thick blue line instead of the default thin gray line. Which CSS is correct?

4. You paste some code into a <pre> block and it contains <h1>. The browser renders it as an actual large heading instead of displaying the text <h1>. What went wrong?

5. What is the recommended semantic pattern for displaying a code sample on a webpage?

Lesson Checklist

I used <br> to format content where line breaks carry meaning — not just for visual spacing
I added a <hr> between two sections with a genuine thematic shift
I styled my <hr> in CSS — starting with border: none before adding custom styling
I used <pre><code> to display a code sample with preserved formatting
I added overflow-x: auto to my pre CSS rule
I escaped any <, >, or & characters inside my <pre> block as HTML entities
I used CSS margin for visual spacing — not stacked <br> tags
I saved my file in the Code Skills Lab after each change