Stop using the <hr> tag to design a horizontal line!

I have seen way too many times people using the <hr> HTML element, which is called "thematic break" instead of CSS.

Using the HTML <hr> tag purely for designing horizontal lines is an incorrect practice. The real purpose of the <hr> tag is to denote a thematic break in the content (like between paragraphs), not just to visually create a horizontal rule.

If you need a decorative line, CSS is a more appropriate choice.

For instance:

<div class="styled-line">Some content</div>

Example CSS:

.styled-line {
  border-bottom: 1px solid #000;
  margin: 1em 0;
}

You generally don't want to have a single empty <span> or <div> element just to style it as a horizontal line. Often times, you can just use a bottom border on the element above it.

In terms of accessibility, using <hr> as a design element can confuse screen reader users, as it indicates a "thematic break".

Semantics are important, not only for accessibility but also for SEO. So, please, stop using the <hr> tag to design a horizontal line!