Когда семантически правильно использовать элемент hr? - PullRequest
21 голосов
/ 28 марта 2012

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

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

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

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

Ответы [ 3 ]

25 голосов
/ 28 марта 2012

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

<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. Если вы обнаружите, что ваш контент хорошо связан, не думайте, что вам нужно использовать тег.

4 голосов
/ 28 марта 2012

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

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

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

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

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

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

0 голосов
/ 28 марта 2012

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

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

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

...