Lesson 15 — Horizontal Rules <hr>

Learning Goals

• Understand what <hr> does.
• Learn when to use horizontal rules for separating content.
• Avoid common misuses of <hr>.

Part 1 — What is <hr>?

The <hr> element creates a **horizontal rule** — a line that indicates a **thematic break** between sections of content.

It is a **semantic element**, meaning it conveys meaning (separation) beyond just appearance.

Part 2 — Example

<h1>My Blog</h1>
<p>Welcome to my blog!</p>
<hr>
<h2>Latest Post</h2>
<p>Here is my newest article...</p>

Result: The <hr> visually separates the intro from the main content.

Part 3 — Best Practices

• Use <hr> to mark transitions in content.
• Style with CSS (e.g., thickness, color) instead of adding multiple <hr> tags.
• Don’t overuse — only add when content meaningfully shifts.

Part 4 — Common Mistakes

• ❌ Adding several <hr> tags just for decoration.
• ❌ Using <hr> instead of proper headings to separate topics.
• ❌ Forgetting it represents a **thematic break**, not just a pretty line.

Quick Quiz

1. What does <hr> represent semantically?
2. Should you style <hr> with CSS or add multiple tags?
3. Give an example of when to use <hr>.

Mini Project — Resume Section

Create a resume page with sections for Education, Experience, and Skills, separated by <hr>.

Lesson 15 Dictionary

Terms introduced in this lesson.

H

hr (<hr>)

An element that creates a horizontal rule, representing a thematic break.

T

Thematic Break

A meaningful division in content, marked visually with <hr>.