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开发者_JAVA百科 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.

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.