HTML5 навигационный тег правильное использование - PullRequest
31 голосов
/ 03 марта 2011
<ul class="mainMenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#" class="mainSelected">Construct</a></li>
    <li><a href="#">Arcade</a></li>
    <li><a href="#">Manual</a></li>
</ul>
<ul class="subMenu">
    <li><a href="#">Homepage</a></li>   
    <li><a href="#">Construct</a></li>
    <li><a href="#" class="underSelected">Products</a></li>
    <li><a href="#">Community Forum</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

Правильнее ли семантически правильно иметь <nav> вокруг обоих этих <ul> по отдельности, или следует обернуть оба навигационных элемента по одному?

Также было бы целесообразно использовать тег nav для обтеканиявокруг пунктов моего нижнего колонтитула?

Ответы [ 3 ]

43 голосов
/ 03 марта 2011

Чтобы процитировать спецификации:

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

Не все группы ссылок на странице нуждаются быть в элементе nav - только разделы которые состоят из основных навигации блоки подходят для навигации элемент. В частности, это распространено для нижних колонтитулов иметь короткий список ссылки на различные страницы сайта, такие как как условия обслуживания, дома страница и страница об авторских правах. Нижний колонтитул одного элемента достаточно для такого случаи, без элемента навигации.

Так что не стесняйтесь оборачивать оба в один тег навигации. Не оборачивайте нижний колонтитул, а используйте тег нижнего колонтитула здесь:)

Читайте спецификации здесь: http://dev.w3.org/html5/spec/Overview.html#the-nav-element

10 голосов
/ 05 апреля 2012

Поиск причин для nav ведется уже много лет. Просто зайдите в Google прямо сейчас, и вы найдете даты по этому вопросу, которые возвращаются к его введению. Единственное реальное использование nav, которое я нашел, - это связать его со стилем в css. Прежде чем сказать, что есть лучшие способы сделать это, учтите, что программисты не единственные, кто делает разметку страницы. Для коммерческого художника, который разрабатывает веб-страницы для жизни, лучше иметь один простой тег, чем думать о классах и подклассах. Если вы какое-то время следили за дискуссиями между различными группами, у вас было бы ощущение, что я вполне могу быть прав в этом. Многие разработчики страниц все о стиле - они художники, а не программисты.

Еще одно подтверждение: если вы посмотрите на новые структурные теги в HTML5, вы легко поймете, что комитету нужны четко определенные основные элементы страницы. Каждый основной элемент может выглядеть и вести себя по-своему. Если вы хотите создать типичную веб-страницу, то может быть очень удобно, если кто-то уже дал имена тегам разделов страницы, чтобы вы могли приступить к их стилизации. Добавьте навигационный тег в той части страницы, где вы предоставляете раздел навигации. Вы спросите, что это? Это не один из других уже предопределенных разделов, таких как нижний колонтитул или боковая панель. Вот учебник, показывающий, где автор считает, что раздел навигации - именно там, где вы ожидаете.

Хорошо. Если я хочу создать страницу, которая будет похожа на миллион других страниц, и моя единственная задача - сделать выбор цветов и художественных элементов отличными от других, все будет довольно обычным делом. Как программист, я не всегда этого хочу. Я хочу, чтобы гибкость выполнялась в соответствии с предполагаемой функциональностью логичным и простым в использовании способом. Было бы неплохо, если бы это было проще, чем сложнее. Итак, просто чтобы немного контрастировать с тем, чтобы показать, что у этой истории есть две стороны - я оплакиваю потерю фреймов и фреймов в HTML5. iFrames являются плохими заменителями.

Победители, которые интересуются стилем без особой заботы о проектируемой структуре и функциональности, всегда хотели подтолкнуть разработку к css, который не является языком программирования. RE: потеря фреймов, похоже, я буду возвращаться к тем временам, когда большинство веб-страниц были структурированы по таблицам; за исключением того, что они хотят, чтобы я определял таблицы в css, а не с тегами на странице. Кажется, они делают все возможное, чтобы заблокировать любой прогресс на динамических страницах; разрешить только полную перезагрузку страницы, чтобы реструктурировать вещи. (Неверно, если вы хотите постепенно переходить от одного изображения к другому в той же структуре страницы.)

Возможно, я сказал немного больше, чем требовалось, чтобы ответить на вопрос, но я подумал, что было бы полезно немного расширить общий контекст.

6 голосов
/ 03 марта 2011

Я бы согласился с Мартином.Оберните их в один навигационный элемент.

Что касается нижнего колонтитула, то используйте другой навигационный элемент, если элементы перемещаются по сайту.

...