
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:

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

Example CSS:

```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!


It's sometimes easy to forget that UI doesn't dicated semantics. In this article I'll show you how to use the "<hr/>" tag properly.

Tag: html

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

Posts associated with html

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