Должен ли я использовать <ul> s и <li> s внутри моих <nav> s?

Название в значительной степени объясняет это.

Теперь, когда у нас есть выделенный тег <nav>,

Это:

<nav>
  <ul>
    <li><a href="#foo">foo</a></li>
    <li><a href="#bar">bar</a></li>
    <li><a href="#baz">baz</a></li>
  </ul>
</nav>

лучше, чем следующее?

<nav>
  <a href="#foo">foo</a>
  <a href="#bar">bar</a>
  <a href="#baz">baz</a>
</nav>

Я имею в виду, полагая, что мне не нужен дополнительный уровень DOM для некоторого позиционирования/заполнения CSS, что является предпочтительным способом и почему?

Ответы

Ответ 1

элемент nav и список предоставляют различную семантическую информацию:

  • Элемент nav сообщает, что мы имеем дело с основным навигационным блоком

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

В http://w3c.github.io/html/sections.html#the-nav-element вы можете видеть, что элемент nav также может содержать прозу.

Итак, да, наличие списка внутри элемента nav добавляет значение.

Ответ 2

В этот момент я бы сохранил элементы <ul><li>, потому что не все браузеры поддерживают теги HTML5.

Например, я столкнулся с проблемой, используя тег <header> - Chrome и FF работали как обаяние, но Opera borked.

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

Ответ 3

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

Ответ 4

Нет, они эквивалентны. Помните, что HTML 5 обратно совместим с списками HTML 4, поэтому вы можете свободно использовать их в том же отношении. Компромисс меньше кода для второй версии.

Если вы обеспокоены обратной совместимостью с браузерами, включите эту прокладку, чтобы обеспечить функциональность таких тегов, как <nav> и <article>.

Ответ 5

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

Ответ 6

Я бы сохранил теги <ul><li>, потому что новые теги (<nav>, <section>, <article> и т.д.) являются скорее более семантическими версиями <div> s.

По той же причине вы не просто загрузите ссылки в <div>, они также должны быть структурированы внутри тега <nav>.

Ответ 7

Для меня неупорядоченные списки - это дополнительная разметка, которая не требуется. Когда я смотрю на документ HTML, я хочу, чтобы он был таким же чистым и легким для чтения, насколько это возможно. Для зрителя уже ясно, что список отображается, если используется правильный отступ. Таким образом, добавление UL к этим тегам не является необходимым и затрудняет чтение документа.

Несмотря на то, что вы можете получить некоторую гибкость, я считаю, что лучше не раздувать разметку неземными классами ul и стилизовать элементы одним махом. И у вас нет оправдания: используйте: before и: после псевдоселекторов.

Изменить. Мне стало известно, что некоторые читатели экрана ARIA относятся к спискам иначе, чем простые якорные теги. Если ваш сайт ориентирован на людей с ограниченными возможностями, я мог бы использовать подход, основанный на списках.