Что является более семантическим, если мне нужно выбрать между <hr> или дополнительной оболочкой <div>?
Чтобы сделать разделитель в одном конкретном проекте, где я работаю, мне нужно сделать разделитель между группами из нескольких элементов. У меня есть только 2 варианта: либо я могу обернуть элементы (внутренние элементы не одинаковы по высоте) внутри <div>
или я могу использовать <hr>
,
Если я использую дополнительный div
, это будет только сделать разделитель.
Что более семантически, один дополнительный div
или же hr
?
2 ответа
Если разделительные линии являются частью контента, то <hr>
безусловно, правильный ответ.
Однако разделительная линия может рассматриваться как элемент дизайна, и в этом случае ее не должно быть в HTML-коде; дизайн должен быть выполнен в таблицах стилей.
Таким образом, вопрос в том, являются ли разделительные линии, которые вы планируете провести, частью контента или дизайна?
Вы можете ответить на этот вопрос, подумав, повлияет ли удаление разделительных линий на содержимое так же, как удаление <br>
теги будут делать. Или подумав, нужно ли вам передавать контент кому-то еще для публикации в другом месте, захотите ли вы включить разделительные линии как часть того, что вы отправляете. Если ответ "да", то они являются частью вашего контента.
Если дело только в том, что это дизайн вашей страницы, то вы должны использовать таблицы стилей для добавления разделителей, потому что, хотя <hr>
является более семантическим, это только семантически правильно, если он формирует активную часть контента.
Вы говорите, что можете обернуть внутренние элементы в <div>
, но это <div>
будет служить только в качестве разделителя. Если у него есть внутренние элементы, кажется, что вы можете использовать его для группировки связанного контента, и в этом случае я бы предложил это как наиболее семантический подход. Иначе, <hr>
это ваш лучший вариант.