Home 〉 HTML Tutorials 〉 HTML '<hr>' Tag - Horizontal Rule Tag in HTML with Syntax, Attributes & Examples

HTML '<hr>' Tag - Horizontal Rule Tag in HTML with Syntax, Attributes and Examples !

HTML '<hr>' Tag - Horizontal Rule Tag in HTML with Syntax, Attributes and Examples !

Looking to learn how to use horizontal lines in HTML effectively?

The '<hr>' tag is your go-to solution for visually separating sections of content. In this post, we explored its syntax, block-level and empty nature, available attributes, styling techniques using inline CSS, and practical examples. We also covered how to enhance your SEO with interlinking and relevant external resources. The complete blog post on HTML horizontal rule '<hr>' tag is as follows.

Introduction

In HTML, the '<hr>' tag is used to create a horizontal line on a webpage, commonly known as a horizontal rule. It is often used to separate content or sections visually. While it doesn't contain any content or text, it plays a vital role in web page structure and layout. Understanding how to use it properly will help you build cleaner, well-structured web pages.

Syntax of '<hr>' Tag

Syntax ✍

<hr>

  • '<hr>' is a self-closing tag (does not need a closing tag).
  • It inserts a horizontal line across the width of its containing element.
  • It does not contain any content and does not require an end tag.

Element Type

The '<hr>' tag is:

  • Block-level element: It takes up the full width and starts on a new line.
  • Empty element: It does not contain any content or child elements.

HTML '<hr>' Tag Attributes with Examples

Although '<hr>' is a simple tag, HTML5 supports a few global attributes to style and manage it.

1. 'id' Attribute

id' attributes gives a unique identifier to the '<hr>' tag.

Code : 1 📝

<!DOCTYPE html>
<html>
<head>
<style>

#section-divider {
width: 80%;
background-color: #db0b0b;
margin: 30px auto;
border-radius: 4px;
}

</style>
</head>
<body>

<hr id="section-divider">

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Useful for CSS targeting or linking to a specific horizontal rule using anchor tags or scripts.

2. 'class' Attribute

Applies a CSS class to style the horizontal rule.

Code : 2 📝

<!DOCTYPE html>
<html>
<head>
<style>

.divider-line {
width: 80%;
border: 1px solid #5e19ad;
margin: 30px auto;
border-radius: 4px;
}

</style>
</head>
<body>

<hr class="divider-line">

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Helps in applying common styles across multiple '<hr>' elements using an external or internal CSS class.

3. 'style' Attribute

Used to apply inline CSS styles directly.

Code : 3 📝

<!DOCTYPE html>
<html>
<body>

<hr style="border: 1px solid #999; margin: 20px 0;">

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Applies direct styling, here it adds a gray border and vertical spacing.

4. 'title' Attribute

Provides additional information (tooltip) when the user hovers over the horizontal rule.

Code : 4 📝

<!DOCTYPE html>
<html>
<body>

<hr title="Section Separator">

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Gives a tooltip text for better accessibility and context.

Inline CSS Styling Examples

You can style the '<hr>' tag using inline CSS to match your web page design.

Code : 5 📝

<!DOCTYPE html>
<html>
<body>

<hr style="width: 80%; border: 1px solid #333; margin: 30px auto; border-radius: 4px;">

</body>
</html>

output 📌

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

  • 'width: 80%;' - Sets width of the line to 80% of its container.
  • 'border: 1px solid #333;' - Dark gray solid border for the line.
  • 'margin: 30px auto;' - Vertical spacing and center alignment.
  • 'border-radius: 4px;' - Rounds the corners of the line for a smooth look.

Conclusion

The HTML '<hr>' tag is a simple yet powerful tool to separate content on a webpage. While it's visually minimal, using it correctly with appropriate styling and attributes helps improve content readability and structure. Whether you're separating sections, breaking up text, or just adding design elements, understanding how to style and use '<hr>' gives you better control over page layout.

Suggested Topics:

Related Topics:

Frequently Asked Questions (FAQs)

What does the '<hr>' tag do in HTML?

It creates a horizontal line, often used to separate sections of content.

Is '<hr>' a block or inline element?

It is a block-level element.

Is the '<hr>' tag an empty element?

Yes, it does not contain any content and is self-closing.

Can we style the '<hr>' tag?

Yes, using inline styles or CSS classes.

What are common attributes used with '<hr>'?

'id', 'class', 'style', and 'title'.

Previous Post Next Post