The hr element is more than a horizontal line

You may have used the hr element for styling when you needed a horizontal line in your designs. Today I came across a tweet by Will Boyd sharing that the hr element comes with semantic meaning! 😲

From the spec:

The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

Good to know!

Edit: if you still want to use hr elements for styling purposes, you could also slap an aria-hidden on to avoid that screen readers announce all the divider elements.

<hr aria-hidden="true">

I usually prefer to style with a border-top in combination with * + * {} but to each their own. :)