Правильное использование тега HTML5 <hr> - PullRequest
Новая
       2

Правильное использование тега HTML5 <hr>

14 голосов
/ 18 августа 2010

Я пишу новую веб-страницу для компании, и я имею в виду (разумное подмножество) рекомендаций HTML5 / W3C.

После прочтения смыслового значения <hr /> мне стало интересно, подходит ли это место для его использования: 

<section name="historyItem">
    <h2>2002</h2>
    <p>Dolorem ipsum dolor sit amet in 2002, consectetur [...]</p>
    <hr />
    <ul>
        <li><a href="#">Link A</a></li>
        <li><a href="#">Link B</a></li>
    </ul>
</section>

Моя аргументация такова: да, что <hr /> представляет собой тематическое изменение от описания раздела до ссылок на разделы , но я не уверен в этом.

Может быть, «тематическое изменение» означает иметь новый абзац позже по другой теме, и, таким образом, мой пример не будет «правильным». Что ты думаешь?

(ps .: Да, <ul> выполнен в стиле CSS, чтобы поместиться в одну строку и выглядеть круто)

Ответы [ 2 ]

5 голосов
/ 18 августа 2010

Я понимаю, что вы имеете в виду. Но лично я бы не стал беспокоиться. Спросите себя, почему вы используете тег в первую очередь. Если вы хотите провести различие между абзацем и ссылками, то с точки зрения чистой разметки я не считаю, что это необходимо. Если речь идет о внешнем виде вашей страницы (т. Е. Вам нужно правило, разграничивающее две области), то снова я бы поставил под сомнение его полезность, учитывая, что вы можете применить границу либо к абзацу, либо к неупорядоченным тегам списка.

Конечно, учитывая, что это html5, вы можете пройти всю свинью и использовать тег <section>…

3 голосов
/ 08 февраля 2012

Если говорить тематически, <hr> означает конец одного «раздела» и начало «другого».По сути, они должны появляться после ваших <section> тегов, а не внутри.Хотя, с семантической точки зрения, на самом деле не имеет значения, где вы хотите их использовать.

Если ваш список элементов ссылок имеет отношение к элементам над тегом <hr> (что относится к другим вашим элементам в <section>, тогда я не рекомендую использовать * 1007. * Вместо этого используйте CSS для разграничения границы и подчеркивания.

Если вам нужна дополнительная ссылка, я нашел это для вас: http://html5doctor.com/small-hr-element/

Приветствия, D

...