Horizontal Line Tag
intermediatePart of HTML Content & Structure
Theory
The <hr> element represents a thematic break between paragraph-level elements. It is a void element (no closing tag) and renders as a horizontal line by default.
Purpose and Usage
Use <hr> to separate distinct sections of content when the shift between topics is strong enough that a visual divider helps readers. Examples: separating a blog post from its comments, dividing a story into chapters, or splitting a long article into parts.
Styling with CSS
The default <hr> styling varies by browser. You can customize it with CSS:
hr {
border: none;
height: 2px;
background: #333;
margin: 30px 0;
}Common properties: border, height, background, margin, width.
When Not to Use <hr>
Do not use <hr> purely for decorative purposes. If you just need a visual line, use CSS borders on container elements instead. The <hr> should always represent a thematic shift in content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Rules Demo</title>
<style>
hr { border: none; height: 2px; background: #007bff; margin: 30px 0; }
</style>
</head>
<body>
<h1>My Travel Blog</h1>
<h2>Exploring Paris</h2>
<p>The Eiffel Tower was stunning at sunset. We walked along the Seine and enjoyed croissants at a local cafe.</p>
<hr>
<h2>Adventures in Tokyo</h2>
<p>Tokyo was a whirlwind of neon lights, delicious ramen, and ancient temples. A city of beautiful contrasts.</p>
<hr>
<h2>Relaxing in Bali</h2>
<p>The beaches were pristine, the sunsets breathtaking, and the people incredibly warm. A perfect end to the trip.</p>
</body>
</html>Exercises
Separate Content Sections
Create an HTML page with at least three sections. Each section must have an h2 heading, a paragraph, and be separated from the next section by an hr element.
Expected Output:
A page with three distinct sections, each with an h2 and paragraph, separated by horizontal rules.