HTML Horizontal Rules

Learn how to use the <hr> element to create thematic breaks and visually separate sections of content.

What is an HTML Horizontal Rule?

The HTML <hr> element represents a thematic break between sections of content.

Browsers commonly display it as a horizontal line, making it useful for visually separating related sections of a document.

Basic Syntax:

<hr>

Simple Example

<h2>HTML Course</h2>

<p>
    Learn HTML step-by-step.
</p>

<hr>

<h2>CSS Course</h2>

Output

HTML Course

Learn HTML step-by-step.

CSS Course

Is <hr> a Void Element?

Yes. The <hr> element is a void element. It does not contain content and does not need a closing tag.

<hr>

Important: Do not use a normal closing tag such as </hr>.

Purpose of the <hr> Element

The <hr> element can be used when there is a meaningful change or separation between sections.

Content Separation

Separates one topic or section from another.

Thematic Break

Represents a change in subject or section within the document.

Visual Separation

Browsers commonly render it as a horizontal separator.

Document Organization

Helps readers recognize transitions between sections of content.

Multiple Horizontal Rules

Multiple <hr> elements can be used when separate sections need to be divided.

<h2>Introduction</h2>

<p>
    Learn the basics of HTML.
</p>

<hr>

<h2>HTML Elements</h2>

<p>
    Learn about HTML elements.
</p>

<hr>

<h2>HTML Attributes</h2>

<p>
    Learn how attributes work.
</p>

Introduction

Learn the basics of HTML.

HTML Elements

Learn about HTML elements.

HTML Attributes

Learn how attributes work.

Using <hr> with Headings

<h1>Web Development</h1>

<p>
    Learn web technologies.
</p>

<hr>

<h2>HTML</h2>

<p>
    Learn the structure of web pages.
</p>

Using <hr> with Paragraphs

<p>
    HTML provides structure.
</p>

<hr>

<p>
    CSS controls presentation.
</p>

<hr>

<p>
    JavaScript adds behavior.
</p>

HTML provides structure.

CSS controls presentation.

JavaScript adds behavior.

Styling the Horizontal Rule with CSS

CSS can be used to change the appearance of an <hr> element.

<hr class="custom-rule">

<style>

    .custom-rule {
        border: 0;
        border-top: 3px solid blue;
    }

</style>

This horizontal rule is styled using CSS.

Different Horizontal Rule Styles

CSS can control the width, color, thickness, spacing, and other visual properties of a horizontal rule.

Solid Rule

Dashed Rule

Dotted Rule

HTML Structure vs CSS Styling

HTML provides the semantic element, while CSS can control how that element looks.

Technology	Responsibility
HTML	Defines the horizontal thematic break using `<hr>`.
CSS	Controls the visual appearance of the rule.

When Should You Use <hr>?

When there is a meaningful thematic change in content.
When separate sections need to be visually distinguished.
When the document benefits from a clear section divider.
When the break has semantic meaning rather than being used only for decorative spacing.

Common Mistakes

Using <hr> only to create empty space.
Trying to use </hr>.
Creating many unnecessary horizontal rules.
Using the element for decorative purposes when a CSS border may be more appropriate.

Complete Example

<!DOCTYPE html>

<html>

<head>

    <title>
        Horizontal Rule Example
    </title>

</head>

<body>

    <h1>
        Web Development
    </h1>

    <p>
        Learn the basics of web development.
    </p>

    <hr>

    <h2>
        HTML
    </h2>

    <p>
        HTML defines the structure of web pages.
    </p>

    <hr>

    <h2>
        CSS
    </h2>

    <p>
        CSS controls the visual presentation.
    </p>

</body>

</html>

Practice Exercise

Create a page with three different sections.
Add a heading and paragraph to each section.
Use <hr> between the sections.
Use CSS to change the appearance of one horizontal rule.
Compare the result with and without the horizontal rules.

Summary

The <hr> element represents a thematic break between sections of HTML content. It is a void element and does not require a closing tag. CSS can be used to control its visual appearance, while the HTML element provides the document structure.

← Previous: Line Breaks Next: HTML Tags →