CODEWITHSUNDEEP
htmlxhtmlsemantic-markup
Jitendra Vyas
Jitendra Vyas

Reputation: 152935

Which is more semantic if I need to choose between <hr> or extra wrapper <div>?

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?

Upvotes: 3

Views: 1421

Answers (2)

Spudley
Spudley

Reputation: 168853

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.

Upvotes: 8

Michael Mior
Michael Mior

Reputation: 28762

You say you can wrap inner elements in a <div>, but that the <div> would only serve as a separator. If it has inner elements, it seems as though you may be using it to group related content, in which case I would suggest that as the most semantic approach. Otherwise, <hr> is your best option.

Upvotes: 2

Related Questions