To make a divider in one specific design where I'm working, I need to make a divider between groups of multiple elements. I have only 2 options: either I can wrap elements (inner elements are not same in height) inside a <div>
, or I can use an <hr>
.
If I use an extra div
, it will be only to make a separator.
Which is more semantic, one extra div
or hr
?
If the dividing lines are part of the content, then <hr>
is definitely the appropriate answer.
However, a dividing line could be considered as a design element, in which case it shouldn't be in the HTML code; design should be done in stylesheets.
So the question is whether the dividing lines you plan to draw are part of the content or the design?
You can answer this question by considering whether removing the dividing lines would affect the content in the same way as removing <br>
tags would do. Or by considering if you had to give the content to someone else to publish elsewhere, whether you would want to include the dividing lines as part of what you send. If the answer is 'yes', then they are part of your content.
If it's purely a case of it being your page design, then you should use stylesheets to add dividers because although <hr>
is more semantic, it is only semantically correct if it forms an active part of the content.