About the HTML <hr> Element

Posted on Updated on HTML by Adam Laki

The <hr> or Horizontal Rule element defines a thematic break in content. If you have paragraph elements and you want to separate them semantically (e.g., you change the topic between them), you can use this element.

Although it usually has a visual representation, it means more than that. If you want to draw a horizontal line, use an unsemantic element with some CSS.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<hr>

<p>Aenean quis varius turpis. Nullam sit amet interdum tellus.</p>

Using the <hr> Element

It is an old element that got a new meaning (semantically) with the HTML5 specification. The specification changed, and today, the attributes (align, noshade, size, width) aren’t supported.

I’m sure that everybody met with this HTML tag. It is presented in most of the WYSIWYG editor, and we usually use it when we feel like it is needed.

Separating any content is necessary both visually and semantically. The first one creates a more pleasant visual value (and separate the sections) while the other will help to make it understandable to the assistive technologies, search engines, and so on.

The <hr> is an empty element that has a start tag but doesn’t need an end tag.

Styling the Horizontal Rule

Because the <hr> is more than a visual element, there is the question of how should we style it. The first rule is, don’t use it at all if you want to use it for styling. If you like to separate meaning in your content, you can safely go with it.

It is a good start if we change the default appearance, which is usually a 1px border. The element has ::before and ::after pseudo so we can be creative. Using the tag alone, we create a semantic separator with the styling; we can represent it with visuality too like any line or any amount of white space.

Need a web developer? Maybe we can help, get in touch!