Должен ли я использовать nav или ul

я делаю меню навигации, должен ли я использовать <nav> или <ul> элемент для этого?

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

если это так, то в чем преимущество использования nav на ul?

EDIT:

Я знаю, что вы можете поставить ul на nav мой вопрос в том, почему использовать nav на всех?

8 ответов


Не путайте с <nav> и <ul>. Их можно использовать вместе для навигационного меню.

Nav - это тег HTML5. Если вы создаете что-то в HTML5 вы можете использовать <nav> поскольку ограничений нет, но не все браузеры будут отображать это правильно.

 <nav>
    <ul>
        <li><a href="default.asp">Home</a></li>
        <li><a href="news.asp">News</a></li>
        <li><a href="contact.asp">Contact</a></li>
        <li><a href="about.asp">About</a></li>
    </ul>
</nav>
  1. читайте о Html 5

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

подробнее о тегах HTML и как они работают здесь.

<ul>
    <li><a href="default.asp">Home</a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>
</ul>

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

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


на nav элемент семантически более конкретно, поэтому, как правило, лучший выбор. Поисковая система, например, поймет, что ссылки внутри нее представляют собой навигацию, а не простой список ссылок (которые могут быть рекомендованы постами или связанными элементами и т. д.).


зависит от случая, но большую часть времени вы будете использовать оба.

<nav>
    <ul>
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
        <li><a href="#">item3</a></li>
        <li><a href="#">item4</a></li>
        <li><a href="#">item5</a></li>
    </ul>
</nav>

<!-- Or just links -->

<nav>
    <a href="#">Item</a>
    <a href="#">Item</a>
    <a href="#">Item</a>
</nav>

Как семантически правильно.


nav является семантическим html5-элементом, который был введен, чтобы указать, что этот код является навигацией вашей страницы. Для "нормальных nonsemantic" поисковых систем нет никакой разницы, если вы используете ul или nav. Они без проблем поймут и то и другое. На данный момент использование этих семантических элементов не создает для вас реального преимущества.

будьте осторожны, используя эти html5-элементы ломает IE, поэтому вам нужно "зарегистрировать" их, поэтому IE распознает их как стилизованные элемент HTML.


обычно вы должны использовать список внутри <nav> во всяком случае, так:

<nav>
  <ul>
    <li>...</li>
  </ul>
</nav>

просто мое мнение, я бы использовал ul просто по той причине, что IE 6 и 7 все еще имеют значительную долю рынка, и я знаю, что мне не придется прыгать через обручи, чтобы получить ul на работу. Во всяком случае, сейчас все проще.


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

<nav>
    <div class="nav">
        <ul>
            <li><a href="?">List Item Link</a></li>
            <li><a href="?">List Item Link</a></li>
            <li><a href="?">List Item Link</a></li>
        </ul>
    </div>
</nav>

для создания меню в html5 можно использовать элементы nav и ul,

  • элемент nav сообщает, что мы имеем дело с основным навигационным блоком
  • список сообщает, что ссылки внутри этого навигационного блока образуют список элементов

однако вы можете использовать nav и ul в создании меню,

<nav>
 <ul>
    <li>item 1</li>
    <li>item 2</li>
 </ul>
</nav>

Это зависит от вас, следует ли выбрать nav или ul