HTML HR Tag (hr): A Complete Guide

What is the HTML hr Tag?

Syntax of the <hr> Tag

The <hr> tag is an empty, self-closing tag in HTML, meaning it doesn’t have a closing counterpart.

<hr>

Basic Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML HR Tag Example</title>
</head>
<body>
    <h1>Introduction to HTML</h1>
    <p>This is an introduction to the HTML `<hr>` tag.</p>
    
    <hr>
    
    <h2>Second Section</h2>
    <p>More content follows after the horizontal line.</p>
</body>
</html>

In this example, the <hr> tag separates the “Introduction to HTML” and “Second Section” of the page.

Attributes of the hr Tag

The <hr> tag itself does not have any specific content or attributes in its original form. However, it supports global attributes like id, class, style, and title, allowing for customization.

Example with Attributes:

<hr class="divider" id="main-divider" style="border: 1px solid #000;">
  • class: Allows you to apply CSS classes for styling.
  • id: Used to uniquely identify the horizontal rule.
  • style: Inline CSS can be used to style the <hr> element directly.
  • title: Adds additional information when the user hovers over the <hr>.

Styling the <hr> Tag

You can customize the appearance of the <hr> tag using CSS. By default, the <hr> tag is displayed as a thin, horizontal line, but with CSS, you can change its color, thickness, style, and width.

Example: Customizing the <hr> Tag with CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled HR Tag</title>
    <style>
        hr {
            border: none;
            height: 2px;
            background-color: #333;
            width: 50%;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>HTML HR Tag Styling</h1>
    <p>Here's a custom styled horizontal rule:</p>
    <hr>
    <p>Content after the horizontal line.</p>
</body>
</html>

In this example:

  • The default border is removed (border: none).
  • The line’s height is set to 2px.
  • The background color is set to a dark gray (background-color: #333).
  • The width of the line is set to 50% of the container.
  • A margin is applied to space the line appropriately (margin: 20px 0).

When to Use the hr Tag

The <hr> tag is typically used for the following purposes:

  1. Separating Sections: Use the <hr> tag to visually break content into logical sections.
  2. Indicating a Theme Change: The <hr> tag can be used to signal a shift in the topic or tone of the content.
  3. Creating Visual Structure: To give the page a structured layout, the <hr> tag can help add visual clarity.

Example: Using <hr> for Separation

<h1>HTML Elements</h1>
<p>Introduction to HTML elements.</p>

<hr>

<h2>Forms</h2>
<p>Forms are used for gathering user input.</p>

<hr>

<h2>Links</h2>
<p>Links allow users to navigate between pages.</p>

Best Practices for Using the hr Tag

Use it for Thematic Breaks

Use it for Thematic Breaks: The <hr> tag should be used when you want to indicate a thematic break or section division, not just for decoration.

Keep It Simple: Avoid using too many <hr> tags in one page, as this can create visual clutter. Use them sparingly to maintain readability.

Accessibility Considerations: While the <hr> tag visually separates content, it does not provide any meaning for screen readers. To make the page more accessible, ensure that the surrounding content is structured properly with appropriate headings and semantic HTML.

Customization: Use CSS to enhance the appearance of the <hr> tag. By default, it is quite plain, but with simple CSS, you can make it more visually appealing and align with your page’s design.

HTML hr

Quiz: Test Your Knowledge of the <hr> Tag