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

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

Теперь, когда у нас есть специальный <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, какой способ предпочтительнее и почему?

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

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

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

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

Так что да, наличие списка внутри элемента навигации добавляет смысла.

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

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

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

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

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

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

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

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

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

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

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

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

По этому вопросу есть действительно подробный пост на CSS Tricks. Очевидно, это горячо обсуждаемый вопрос; у поста более 200 комментариев.

Навигация в списках: быть или не быть (CSS Tricks, январь 2013 г.)