HTML hr tag: Syntax, Usage, and Examples

The HTML hr tag is a simple yet effective way to create visual breaks in a webpage. It adds a horizontal line that separates content sections, making pages more organized and easier to read. While minimal in appearance, the hr tag in HTML offers styling and structural flexibility when used with modern CSS.

How to Use the HTML hr Tag

The <hr> element is short for “horizontal rule.” It doesn’t require a closing tag and is written as a self-closing element in HTML5:

<hr>

By default, the HTML hr tag renders a thin horizontal line that spans the full width of its container. It creates a visual separation between paragraphs, topics, or sections of a page.

You can place it anywhere in your HTML where you want a content break:

<p>This is the first section.</p>
<hr>
<p>This is a new section after the horizontal rule.</p>

When to Use the hr Tag in HTML

The hr tag serves both structural and stylistic purposes. You might think of it as just a line, but in practice, it does much more:

Separating Content Sections

Use <hr> to break up large blocks of content. For instance, in articles or blogs:

<h2>Introduction</h2>
<p>Welcome to our tutorial on CSS styling.</p>
<hr>
<h2>Main Content</h2>
<p>Let’s dive into the core principles...</p>

This signals a shift in topic or focus, giving readers a visual pause.

Dividing Quotes or Messages

In forums, testimonials, or comment sections, horizontal rules can help distinguish one post or reply from another:

<p>“This is a great product. Highly recommend!”</p>
<hr>
<p>“Customer support was responsive and helpful.”</p>

Styling UI Elements

You can use the hr tag HTML creatively within user interfaces—for example, between form fields or sections in a dashboard.

<h3>Personal Info</h3>
<form>
  <!-- form fields -->
</form>
<hr>
<h3>Account Preferences</h3>
<form>
  <!-- form fields -->
</form>

This gives each form section a clear boundary.

Examples of the hr Tag HTML in Use

Basic hr Tag

<p>Before the break</p>
<hr>
<p>After the break</p>

No styling, just a default horizontal line across the container.

Styled Horizontal Line with CSS

You can control the appearance of the line using CSS:

<hr style="height: 2px; background-color: #333; border: none;">

This creates a thicker, dark line without borders.

Dotted or Dashed Line

To create a dashed or dotted rule, use the border-style property:

<hr style="border-top: 1px dashed #ccc;">

<hr style="border-top: 2px dotted blue;">

This is perfect for stylized breaks in creative designs.

Custom Width and Alignment

By default, the hr tag spans 100% of its parent container. You can control that:

<hr style="width: 50%; margin: auto;">

This centers the line and limits it to half the width of the container.

Horizontal Rule as a Decorative Element

You can use the HTML hr tag in headers or footers for decorative purposes:

<h1>Welcome</h1>
<hr style="width: 60px; border: 2px solid #000;">

This adds a visual accent under a headline or logo.

Learn More About the HR Tag in HTML

Semantic Meaning of hr

In HTML5, the <hr> element is no longer considered a purely visual element. It now carries semantic meaning—representing a thematic break in content. This means that screen readers and other assistive technologies interpret it as a meaningful separation of ideas.

Use it when you want to indicate a division in thought, not just for decoration.

Attributes of hr Tag in HTML

The HTML hr tag doesn’t have many attributes, but here are a few worth knowing:

align (obsolete)

In older HTML versions, you could use align to set horizontal alignment. Modern CSS replaces this:

<!-- Not recommended -->
<hr align="left">

Use CSS instead:

<hr style="margin-left: 0; margin-right: auto;">

color (obsolete)

This used to set the line color but is now deprecated. Use CSS for color control:

<!-- Not recommended -->
<hr color="red">

Better approach:

<hr style="border-color: red;">

size (obsolete)

This attribute previously controlled height but is no longer valid. CSS is the modern solution:

<hr style="height: 5px;">

Responsive Horizontal Rules

To make your horizontal line adapt to different screen sizes, use percentage widths and relative spacing:

<hr style="width: 80%; margin: 2rem auto;">

This keeps the line consistent across devices, especially useful in mobile-first design.

hr in Layouts and Frameworks

CSS frameworks like Bootstrap apply default styling to the hr tag:

<hr class="my-4">

This adds spacing (margin-top and margin-bottom) and integrates with the rest of the grid system. You can also extend it with your own classes:

<hr class="section-divider">

Then define the style:

.section-divider {
  border: none;
  height: 2px;
  background-color: #222;
  width: 70%;
  margin: 40px auto;
}

This lets you reuse consistent rules throughout your project.

Accessibility Tips

The <hr> tag is keyboard-accessible and screen-reader friendly. It helps users with screen readers understand when a new section starts—if used correctly. Don’t use the hr tag as a spacer or layout tool. Use semantic HTML and ARIA roles if additional structure is needed.

Also, be careful with excessive use of styled rules. While dotted or animated lines might look interesting, they can be visually disruptive, especially for users with visual impairments.

Using hr in HTML Emails

Most email clients support <hr>, but support for advanced CSS may vary. Stick to simple styles:

<hr style="border: 0; height: 1px; background-color: #ccc;">

And always test your email in multiple clients (Gmail, Outlook, Apple Mail) to ensure consistent appearance.

Using the HTML hr tag is a fast and effective way to organize content, improve readability, and visually separate sections. While the default style is simple, pairing it with CSS gives you full control over its look and placement. Whether you're working on a blog, a form, or a landing page, the hr tag HTML can help create structure without clutter.

Just remember: it’s no longer just a line. It's a meaningful break in content—and when used with care, it helps both humans and browsers understand the flow of your page.