How to use the HR tag to create a Divider in HTML

When you want to visually divide your content with a horizontal line, you can use the HTML <hr> element.

This element renders a horizontal line, which you can then extend further using CSS.

In this post, we'll learn how to use the <hr> element to create a horizontal line.

Using the <hr> element

The <hr> element is a self-closing element, meaning it doesn't have any content inside of it.

Simply place it between your content and it will render a horizontal line.

Here's an example:

HTML
<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph.</p>

You can try it out for yourself:

Customizing the <hr> element

You can customize the <hr> element by taking advantage of borders.

Here's an example of how you can customize the <hr> element:

HTML
<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph.</p>

CSS
hr {
    border: 0;
    border-top: 1px solid red;
}

Try it out for yourself:

You can use any valid border styles here, like dashed or dotted to help get your desired effect.

Conclusion

In this post, we learned how to use the <hr> element to create a horizontal line.

We also learned how to easily customize the <hr> element using CSS.

Hope you enjoyed this post!

• Support Us
• Discord
• Share
• Post
• Share