HTML Horizontal Rules

Understanding HTML Horizontal Rules

The HTML <hr> element represents a thematic break between sections of content, such as a change in topic or a transition to a different part of a discussion.

Browsers commonly display the <hr> element as a horizontal line, which is why it is often called a horizontal rule. Its HTML meaning, however, is structural rather than purely decorative.

HTML Horizontal Rule Syntax

The <hr> element is placed between blocks of content where a thematic change occurs.

<p>This paragraph discusses the first topic.</p>

<hr>

<p>This paragraph begins a different topic.</p>

The browser normally displays a horizontal line between the two paragraphs, visually indicating the break in the content.

HTML Horizontal Rule Example

The following example uses an <hr> element to separate two related but distinct parts of the page.

<h2>Morning Schedule</h2>
<p>The morning begins with breakfast and a walk.</p>

<hr>

<h2>Afternoon Schedule</h2>
<p>The afternoon is reserved for work and errands.</p>

Try adding or removing the <hr> element in the editor to see how the thematic break affects the organization of the content.

Using <hr> for Thematic Breaks

The purpose of the <hr> element is to indicate a change in theme, topic, or context within the content. The break should still make sense even if the horizontal line itself is not visible.

For example, an article might use a thematic break when moving to a different scene, subject, or point in time without beginning an entirely separate article or page.

The <hr> Element Is an Empty Element

The <hr> element is an empty element. It does not contain text or other content and does not require a closing tag.

<hr>

In HTML5, a trailing slash is unnecessary. Although browsers accept <hr />, the simpler <hr> syntax is appropriate for HTML documents.

Styling Horizontal Rules with CSS

The visual appearance of an <hr> element can be changed with CSS. You can control properties such as its border, width, color, and surrounding space while preserving its meaning as a thematic break.

hr {
  border: 0;
  border-top: 1px solid #777777;
  margin: 2rem 0;
}

CSS should be used when you want to change how the horizontal rule looks rather than using obsolete HTML attributes to control its presentation.

Avoid Using <hr> for Decoration

Do not use an <hr> element simply because you want a decorative line somewhere on the page. The element should represent a meaningful thematic break in the content.

If a line is needed only for visual design, use CSS instead. Borders and other CSS properties can create visual separators without adding unnecessary structural meaning to the HTML.

.section-divider {
  border-top: 1px solid #cccccc;
}

Horizontal Rule Best Practices

• Use <hr> to represent a meaningful thematic break in the content.
• Do not use <hr> simply to draw a decorative line.
• Use CSS when a separator is needed only for visual presentation.
• Use CSS to control the appearance and spacing of horizontal rules.
• Do not add a closing </hr> tag.
• Use the simple <hr> syntax in HTML5 documents.

Summary

The HTML <hr> element represents a thematic break between sections of content. Although browsers commonly display it as a horizontal line, its purpose is to communicate a change in theme or context, while CSS controls its visual appearance.