Let’s over-engineer the HTML horizontal rule … the smart way

The <hr> element is a self-closing tag that is meant to represent a thematic break in the content. Remember: the horizontal rule is not a border or a line and it’s not meant to serve a styling purpose, instead, it marks the end of a section in your document.

It would be perfectly reasonable to add a <hr> element to your document to mark the thematic break then completely hide it with CSS as displaying it would simply not match your design.

Now, imagine you have two different horizontal rules in your document differentiated with unique classes:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis justo ex, nec commodo metus pellentesque quis. Suspendisse lobortis eros elit, nec consequat sem posuere et.</p>
<hr class="paragraph" />
<p>Mauris nec magna nisi. Maecenas nec leo ullamcorper tellus eleifend lobortis. Nulla risus orci, porta non diam vitae, posuere efficitur risus. Sed lorem dolor, imperdiet quis condimentum in, posuere quis arcu.</p>
<hr class="section" />
<p>Aliquam pretium lacus a ex tincidunt, et aliquet magna feugiat. Suspendisse sagittis…