HTML <hr> Tag – The Horizontal Rule Element

Definition and Usage

The <hr> tag represents a thematic break between paragraph-level elements (e.g., a scene change or a transition to a different topic within a section of a reference book).
In most browsers, the <hr> tag is rendered as a horizontal rule.

The <hr> tag is an abbreviation for horizontal rule.

The <hr> tag should not be used merely as a visual "horizontal line"; it should be used to represent a paragraph-level thematic break.

The <hr> tag is a void element, meaning it cannot have any content and does not have a closing tag (</hr>).

Basic Example

HTML

<p>
    HTML (HyperText Markup Language) is
    <br>
    the most fundamental language for creating web pages
    and is essential for learning web development.
</p>
<hr> <!-- A paragraph-level thematic break -->
<p>
    CSS (Cascading Style Sheets) is
    <br>
    a language used to define the appearance and style,
    that is, the design of web pages written in HTML (or XML).
</p>
<hr> <!-- A paragraph-level thematic break -->
<p>
    JavaScript is
    <br>
    one of the most widely used
    programming languages in web development.
</p>

Code Explanation
The <p> tag represents a paragraph.

Use CSS to style the horizontal rule as desired.

Things to Keep in Mind

There are a few things to keep in mind when using the <hr> tag.

The `<hr>` Tag Does Not Affect the HTML Document Outline

A document outline represents the structure of the content, primarily influenced by heading elements such as <h1>, <h2>, <h3>, etc. While the <hr> tag is used to create a horizontal rule that separates content, it is not a structural element and therefore does not affect the document outline.

HTML <h1>~<h6> Tags

This allows you to visually separate content using the <hr> tag without altering the document outline.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Incorrect Use of the HR Tag</title>
    </head>
    <body>
        <header>
            <h1>Main Title</h1>
        </header>
        <nav>
            <ul>
                <li><a href="#">Menu Item 1</a></li>
                <li><a href="#">Menu Item 2</a></li>
                <li><a href="#">Menu Item 3</a></li>
            </ul>
        </nav>
        <section>
            <h2>Section Title</h2>
            <p>This is the content of the section.</p>
        </section>
        <hr> <!-- Incorrect usage: placing the <hr> tag outside of a section or content area -->
        <footer>
            <small>Copyright © 2026 Incorrect Example Company. All rights reserved.</small>
        </footer>
    </body>
</html>

In the code above, the <hr> tag is not placed within a paragraph-level element, such as a <section> or a content area. Instead, it is misplaced between a section and the <footer>. When used in this way, the horizontal rule does not clearly represent the structure of the document and may lead to structural confusion.

The `<hr>` Tag Should Not Be Used Merely as a Visual Horizontal Rule

Using the <hr> tag solely as a decorative horizontal line is generally considered poor practice.

The <hr> tag should be used with its semantic meaning as a "thematic break between paragraph-level elements"—such as a scene change in a story or a transition to a different topic within a section of a reference book.

If you only want to display a line for visual purposes, it is better to style a <div> tag—which has no inherent semantic meaning—using CSS. For example, you can create a horizontal line using the following CSS:

CSS

.horizontal-line {
    border-top: 1px solid black; /* Defines the style of the horizontal line */
    margin-top: 20px; /* Adjust spacing as needed */
    margin-bottom: 20px; /* Adjust spacing as needed */
}

And in HTML, you can add a horizontal line by applying the class as follows.

The aria-hidden="true" attribute is used for screen readers and other assistive technologies. When aria-hidden is set to true, the element and its descendants are hidden from the accessibility tree, meaning they are not exposed to assistive devices. In the example above, the <div> tag serves only as a visual decoration, so this attribute is applied to improve web accessibility by preventing unnecessary noise for screen reader users.

Technical Summary

Technical Summary of the hr tag
Permitted parents	Any element that accepts flow content
Permitted content	None; it is a void element.
Implicit ARIA `role`	`separator`
Permitted ARIA `roles`	`presentation`, `none`

Although the specification lists the <select> element as an allowed parent for the <hr> tag, many browsers currently offer limited or inconsistent support. For this reason, it has been excluded from this guide. Be sure to check browser compatibility before attempting to use it in this manner.