2

I have an app which has sections, and I need a 1px line between them. It seems I have a choice:

  1. An hr element.

  2. A div with a 1px border.

  3. A div which is one pixel high, and has a background color.

See example

.hr1{
  border-bottom: 1px solid;
}

.hr2{
  height:1px;
  background-color:black;
}

Is there any benefit to one particular way?

It seems to me the hr element is not a good idea, as the styling could get changed too easily.

4
  • Depending on your context it might simply make sense to add a bottom border on containing sectioning elements. The main difference will be in semantics, a hr means a "thematic break" between paragraphs, see MDN.
    – Etheryte
    Dec 24, 2016 at 18:48
  • This seems to be primarily opinion based, but I would say: 1. <hr /> will be an extra tag. 2. border will be easily styleable using CSS. Dec 24, 2016 at 18:49
  • @Nit, I actually tried that, but there are many nested divs on the page. I need to put the hr between the higher level divs, or it doesn't span the page.
    – Greg Gum
    Dec 24, 2016 at 18:50
  • This also looks like it's something to do with the UX. Dec 24, 2016 at 18:53

2 Answers 2

5

Yes, there is one overwhelming advantage to using the proper hr element: it is understood by text-based browsers and screen readers.

To someone who doesn't use a normal browser, an empty div will not show at all, whether or not there is a border. An hr always will. It's probably desirable for it to do so.

More information is available on this accessibility site, which also notes a suggestion for times when you need to use something other than an hr:

<div class="rule"></div><hr>
div.rule {
    height: 1px;
    background: blue;
}
hr {
    display: none;
}
1
  • That is very interesting. I had not thought about the accessibility aspect of the situation. But of course you are right.
    – Greg Gum
    Dec 24, 2016 at 19:04
2

To add to @lonesomeday's answer: The correct use of the HR element is important to screenreaders, and text-based browsers. This example is given from the spec:

Some examples of thematic breaks that can be marked up using the hr element include a scene change in a story, or a transition to another topic within a section of a reference book.

The use case in the question is presentational, not thematic. So it would not add a benefit to a text-based browser, or screen reader. So an hr element should not be used in this case.

Not the answer you're looking for? Browse other questions tagged or ask your own question.