Чи слід використовувати <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-позиціонування / прокладки, що є кращим способом і чому?

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

• Елемент nav повідомляє, що ми маємо справу з головним блоком навігації

• У списку повідомляється, що посилання всередині цього блоку навігації утворюють список елементів

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

Так що так, наявність списку всередині елемента елемента додає значення.

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

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

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

Це справді залежить від вас. Якщо ви зазвичай використовували не упорядкований список для розмітки свого навігаційного меню, тоді я б сказав, що продовжуйте робити це в елементі <nav>. Суть елемента <nav> полягає в тому, щоб визначити навігацію сайту до комп'ютерного зчитувача, наприклад, чи ви використовуєте список або просто посилання, не має значення.

Для мене не упорядковані списки - це додаткова розмітка, яка насправді не потрібна. Переглядаючи документ HTML, я хочу, щоб він був максимально чистим і легким для читання. Глядачеві вже зрозуміло, що подається список, якщо використовується правильне відступ. Таким чином, додавання UL до цих тегів є непотрібним і ускладнює читання документа.

Хоча ви можете отримати певну гнучкість, я вважаю, що краща ідея не роздувати розмітку несемантичними класами ul та стилювати елементи одним махом. І у вас немає виправдань: використовуйте: перед і: після псевдоселекторів.

Редагувати : Мені стало відомо, що деякі читачі екранів ARIA трактують списки інакше, ніж прості теги прив’язки. Якщо ваш веб-сайт орієнтований на людей з обмеженими можливостями, я можу розглянути можливість використання підходу, заснованого на списку.

Ні, вони рівнозначні. Пам’ятайте, що HTML 5 назад сумісний із списками HTML 4, тому ви можете сміливо використовувати їх у тому ж плані. Розміщення - менше коду для другої версії.

Якщо вас турбує зворотна сумісність щодо веб-переглядачів, обов'язково включіть цю номенклатуру, щоб забезпечити функціональність тегів, таких як <nav>і <article>.

Якщо ми говоримо «за книгою», то ні; Вам не потрібно використовувати списки для позначення навігації. Єдина реальна перевага, яку вони пропонують, - це забезпечити кращу ступінь гнучкості під час стилізації.

Я б тримати <ul><li>тег, тому що нові теги ( <nav>, <section>, <article>і так далі) є тільки більш семантичними варіантами <div>с.

З тієї ж причини, ви б не просто завантажили посилання в <div>, вони також повинні бути структуровані всередині <nav>тегу.

Про справжнє запитання про CSS Tricks є дійсно докладний пост. Це, очевидно, гаряча дискусія; у публікації понад 200 коментарів.

Навігація в списках: бути чи не бути (фокуси CSS, січень 2013)