Sometimes you need a visual divider between sections of your page. A line that says, "hey, this section ends here and a new one begins." That is exactly what the <hr> tag does.
<hr> stands for "horizontal rule." It draws a line across the width of its container. It is a self-closing tag, just like <br> — no closing tag needed.
Using the hr Tag
Drop an <hr> anywhere you want a thematic break. Between sections, after a story, before a footer — anywhere you feel like the content shifts to a new topic.
<h1>Chapter 1: The Beginning</h1>
<p>It was a dark and stormy night...</p>
<hr>
<h1>Chapter 2: The Plot Thickens</h1>
<p>The next morning, everything had changed.</p>
<hr>
<p>Footer text and copyright information.</p>Thematic Breaks, Not Decorative Lines
Here is the thing about <hr> — it is meant to represent a thematic shift, not just a decorative line. The HTML spec says: "The hr element represents a paragraph-level thematic break." In simple terms, use it when the topic changes, not just because you want a pretty line on the page.
If you want a decorative line purely for visual purposes, CSS borders or background images are the right tool. The <hr> carries meaning — it tells screen readers and search engines that the content has shifted.
Styling hr Elements
By default, <hr> looks different in every browser — some make it a solid line, others make it a subtle groove. You can customize it with CSS later, changing its color, thickness, width, and style.
<!-- Default hr -->
<hr>
<!-- You can add attributes for basic styling -->
<hr width="50%">But honestly, save the styling for CSS. For now, just get comfortable with how <hr> divides your content naturally.