html5 NAV TAG правильное использование - PullRequest
Новая
       7

html5 NAV TAG правильное использование

4 голосов
/ 10 августа 2011

Я начал использовать теги html на своих страницах и пытаюсь определить, как правильно использовать тег NAV. Я прочитал документацию, и кажется, что я должен быть в порядке с тем, что у меня есть, но я заметил, что большинство других разработчиков имеют свои «блоки» навигации в тегах «ul» и «li». Я использую Div.

Мой вопрос: каковы плюсы / минусы использования тегов "ul" и "li" вместо div?

И будет ли следующее работать с nav? 

<nav>
    <div id="navBar">
        <div id="navItem1"><a></a></div>
        <div id="navItem2"><a></a></div>
        <div id="navItem3"><a></a></div>
        <div id="navItem4"><a></a></div>
    </div>
</nav>

Ответы [ 3 ]

7 голосов
/ 10 августа 2011

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


<nav>
    <ul>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
    </ul>
</nav>
Теги

<ul> и <li> лучше, чем теги div, и почти всегда используются для меню. Используя ul s и li s, вы не засоряете свой код с WAY слишком большим количеством идентификаторов.

3 голосов
/ 10 августа 2011

Списки (ul, ol) могут иметь дополнительное значение в доступных браузерах (средства чтения с экрана и т.п.), а div - нет. Это облегчает пользователям доступ к вашему сайту, и для меню предпочтительны списки причин.

Также, как говорили другие, теги списка дают контенту некоторый контекст (меню представляют собой списки ссылок), в то время как у div нет контекста.

1 голос
/ 10 августа 2011

по выбору, панель навигации считается списком ссылок, следовательно, ul-li.фактической разницы нет, просто обычная практика

то, что вы делаете, хорошо, хотя, возможно, я бы заменил div # navBar напрямую на nav # navBar, чтобы уменьшить уровень анимирования

...