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

Updated onbyAlan Morel
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:

  • HTML

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:

  • HTML
  • CSS

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!

To learn more about web development, founding a start-up, and bootstrapping a SaaS, follow me on X!
Copyright © 2017 - 2024 Sabe.io. All rights reserved. Made with ❤ in NY.