Что является более семантическим, если мне нужно выбрать между <hr>или дополнительной оболочкой <div>?

Question

Чтобы сделать разделитель в одном конкретном проекте, где я работаю, мне нужно сделать разделитель между группами из нескольких элементов. У меня есть только 2 варианта: либо я могу обернуть элементы (внутренние элементы не одинаковы по высоте) внутри <div>, либо я могу использовать <hr>.

Если я использую дополнительный div, это будет только сделать разделитель.

Что является более семантическим, один дополнительный div или hr?

Answer 1

Если разделительные линии являются частью содержимого, тогда <hr> - это, безусловно, правильный ответ.

Однако разделительную линию можно рассматривать как элемент дизайна, в этом случае ее не должно быть в HTML-коде; дизайн должен быть выполнен в таблицах стилей.

Итак, вопрос в том, являются ли разделительные линии, которые вы планируете провести, частью контента или дизайна?

Вы можете ответить на этот вопрос, подумав, повлияет ли удаление разделительных линий на содержимое так же, как и удаление тегов <br>. Или подумав, нужно ли вам передавать контент кому-то еще для публикации в другом месте, захотите ли вы включить разделительные линии как часть того, что вы отправляете. Если ответ «да», то они являются частью вашего контента.

Если это просто случай, когда вы создаете свою страницу, вам следует использовать таблицы стилей для добавления разделителей, поскольку, хотя <hr> является более семантическим, он семантически корректен только в том случае, если он образует активную часть содержимого.

Answer 2

Вы говорите, что можете обернуть внутренние элементы в <div>, но <div> будет служить только разделителем. Если у него есть внутренние элементы, кажется, что вы можете использовать его для группировки связанного контента, и в этом случае я бы предложил это как наиболее семантический подход. В противном случае, <hr> ваш лучший вариант.