HTML hr Tag: Horizontal Rules

The <hr> tag in HTML gives you a fast way to split content with a clean horizontal line. You may want to show a shift in topic, break up text, or signal a new section. This tag helps you do that without extra styles or layout work.

Understand the <hr> Tag in HTML

The <hr> tag creates a horizontal rule across the page. It shows a break in the flow of text or content. You do not need to pair it with a close tag.

Here is the syntax:

<hr>

The tag does not need any content. You place it on its own line to create space between parts of your page.

Browsers show the <hr> tag as a thin horizontal line. Most use a solid gray color. It stretches across the page or container. It adds margin before and after the line.

Use <hr> between:

• Two topics in a long article
• Main sections in a blog post
• Quotes and source lines
• Footer and main content

Do not use it just to decorate or fix spaces. Stick to breaks in meaning.

It signals a shift or break in thought. This helps screen readers and search engines understand the structure of your page. It is more than just a line. It shows intent.

The <hr> vs CSS Borders

You can use both <hr> and CSS to show a horizontal line. But they serve different roles. <hr> adds structure while CSS adds style.

Here is an example:

<section>
  <h2>Chapter 1</h2>
  <p>Intro text.</p>
  <hr>
  <h2>Chapter 2</h2>
  <p>Next topic.</p>
</section>

Here is another example for css border:

<div style="border-top: 1px solid #ccc; margin: 20px 0;"></div>

Key differences:

• <hr> carries semantic meaning. CSS borders do not.
• <hr> is easy to write. CSS borders give you more style control.
• Use <hr> for structure. Use CSS borders for layout or decoration.

HTML5 now marks a shift in topic. This makes it useful for both screen readers and visual layout. It is no longer just a visual break.

How to Style the <hr> Tag with CSS

You can change the look of <hr> with CSS. Some common styles include:

hr {
  border: none;
  border-top: 2px dashed #888;
  margin: 40px 0;
  width: 80%;
  height: 0;
}

This removes the default style and adds a custom dashed line with space around it.

Examples

Dashed Divider Between Topics:

<hr style="border: none; border-top: 2px dashed #999; margin: 30px 0;">

This adds a soft break with a dashed style. Use this between sections of a blog or article to guide the reader’s eye.

Thick Line With Custom Color:

<hr style="border: none; height: 4px; background-color: #0a74da; margin: 20px 0;">

This example uses a bold, colored line. It works well to mark key breaks in content or highlight new parts of a web page.

Centered Line With Limited Width:

<hr style="width: 60%; margin: 40px auto; border: none; border-top: 1px solid #ccc;">

The line stays centered and does not stretch across the whole screen. This creates a subtle divider that keeps the layout neat.

Double Line With Shadow:

<hr style="border: 0; border-top: 3px double #333; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin: 50px 0;">

This advanced style creates depth. It uses double lines and a soft shadow to add visual weight without extra markup.

Wrapping Up

In this article, you learned what the <hr> tag does and how it works in HTML5. You also saw how to style it and when to use or avoid it.

Here is a quick recap:

• <hr> adds a visual and semantic break
• It renders as a horizontal rule
• HTML5 treats it as a topic shift
• Use CSS to control its style

FAQs

hr {  
  border: none;  
  height: 2px;  
  background: #000;  
}

Similar Reads