Когда это семантически правильно использовать элемент hr?

ссылка HTML5 говорит, что

Элемент hr представляет собой тематический перерыв на уровне абзаца, например. изменение сцены в истории или переход к другой теме в разделе справочника.

Это описание недостаточно для описания. Я использую элемент hr в своих HTML-документах как способ разделить контент. Правильно ли это?

Может ли кто-нибудь привести несколько примеров того, когда его использовать (кроме приведенных примеров), и когда вместо этого использовать стиль CSS?

Ответ 1

Собственно использовать его, если у вас есть, скажем, несколько абзацев с двумя отдельными темами.

<p>Paragraph about domestic kittens</p>
<p>Paragraph about kittens' favourite foods</p>
<p>Paragraph about kittens' playfulness</p>
<hr>
<p>Paragraph about my day at work</p>

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

<img src="/img/kitten.jpg" alt="kitten playing with ball">
<img src="/img/kitten1.jpg" alt="kitten drinking milk">
<hr>
<img src="/img/zebra.jpg" alt="zebras in the wild">

Новое использование hr, по-видимому, просто для отличия тем внутри HTML. Если вы обнаружите, что ваш контент хорошо связан, не чувствуйте, что вам нужно использовать тег.

Ответ 2

Согласно в этой статье

В HTML 4.01 тег <hr> представляет собой горизонтальное правило.

В HTML5 тег <hr> определяет тематический разрыв.

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

Все атрибуты макета (выравнивание, noshade, размер и ширина) в HTML 4.01 был устарел в HTML 4.01 и не поддерживается в HTML5. Использовать CSS для style вместо <hr>.

В HTML5 используйте <hr>, когда вы отвлекаете свою тему от ранее написанного абзаца.

Ответ 3

Мой короткий ответ и то, как я это делал, это то, что я использую <hr>, когда нет другого способа сделать это с помощью CSS. Для меня это переводится на многие годы написания html и никогда не нужно использовать <hr>.

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

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