HTML5 навигационное содержимое тега

Question

Кажется, что в документах есть противоречивые примеры, относящиеся к тегу <nav> в html5.Большинство примеров, которые я видел, используют это:

<nav>
  <ul>
    <li><a href='#'>Link</a></li>
    <li><a href='#'>Link</a></li>
    <li><a href='#'>Link</a></li>
  </ul>
</nav>

Но мне интересно, если это только потому, что люди привыкли использовать div.Есть примеры, которые я видел, которые просто делают это

<nav>
  <a href='#'>Link</a>
  <a href='#'>Link</a>
  <a href='#'>Link</a>
</nav>

Второй способ кажется мне чище и более семантическим.Есть ли "официальная" правильная версия?Есть ли веская причина по-прежнему использовать <ul> внутри тега nav, а не просто использовать элементы привязки напрямую?

Answer 1

Оба примера семантические.

В первом примере список якорей является явно неупорядоченным списком. Во втором примере список ссылок - это просто набор якорных элементов.

Если вам просто нужна одномерная коллекция ссылок, я рекомендую придерживаться

<nav>
  <a href='#'>Link</a>
  <a href='#'>Link</a>
  <a href='#'>Link</a>
</nav>

однако использование элементов ul допускает явные иерархические меню (например, раскрывающиеся списки или древовидные списки):

<nav>
  <ul>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a href="#">Link</a>
      <ul>
        <li>
          <a href="#">Sub link</a>
        </li>
        <li>
          <a href="#">Sub link</a>
        </li>
        <li>
          <a href="#">Sub link</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Link</a>
    </li>
    <li>
      <a href="#">Link</a>
      <ul>
        <li>
          <a href="#">Sub link</a>
        </li>
        <li>
          <a href="#">Sub link</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Answer 2

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

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

Answer 3

Между ними нет реальной разницы.Однако, как сказал Каймен, поисковые системы используют разметку страницы для группировки данных для улучшения результатов веб-поиска.Я бы посоветовал вам использовать первое, если ссылки очень похожи по теме (например, для блога), и второе, если ссылки не очень похожи (для навигации по результатам поиска по сайту).

Answer 4

Вы можете использовать либо.

Список, как правило, используется только как список ссылок, как правило, это просто список. Но это зависит от вас.