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


114

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

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


Хороший вопрос ... Можно ли применить какие-либо из предыдущих передовых методов к тегам, которые не имеют смысла для HTML 4?
Guffa

Ответы:


63

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

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

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

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

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


Большое спасибо, это то, что мне было нужно! Кроме того, очень полезным был комментарий Роберта о том, что программы чтения с экрана объявляют «список из трех пунктов» ниже.
kikito

7
Похоже, тег UL ничему не помогает: css-tricks.com/navigation-in-lists-to-be-or-not-to-be
psycho brm

2
Ссылка вроде у меня работает. Обязательно прочтите продолжение, в котором списки объявлены, а не списки ничьей. css-tricks.com/wrapup-of-navigation-in-lists
RobW

На мой взгляд, <nav>без <ul><li>него детское меню будет более динамичным. Что делать, если у вас есть несколько списков меню, которые имеют разный тип и расположение в <nav>? Я бы сгруппировал эти списки меню, как <ul><li>в <nav>. Так что, если в вашем меню есть обычные, я бы согласился <ul><li>.
wonsuc

3

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

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

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


3
Используйте javascript-файл HTML 5 Shim ( remysharp.com/2009/01/07/html5-enhibited-script ) для устранения любых возможных ошибок обратной совместимости с такими браузерами, как Opera и IE.
acconrad

Но тогда ваш сайт не подходит для ненавязчивого скриптинга :)
Демиан Брехт

1
То есть до тех пор, пока IE8 не выйдет с рынка ... так будет до 2016 года ...:)
Шиме Видас,

@ Šime - точно :) И отключение Javascript больше не является вариантом в браузерах;)
Демиан Брехт

@ Agent_9191 будет - я совершенно удивлен сегодня, когда мне захотелось просто проверить, сколько людей все еще использует IE7, и угадайте, что - в большинстве стран больше людей используют браузеры, такие как Opera или iPad Safari, чем IE7. Я так счастлив, что теперь могу отказаться от поддержки IE7! И IE8 рано или поздно уйдет. Это последний браузер, с которым нам придется столкнуться (IE9 не так уж и плох, чтобы кодировать).
Камило Мартин,

2

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


+1 из-за упоминания о том, что для программ чтения navс экрана s и as теперь так же хороши, как и списки.
Камило Мартин,

2

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

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

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


1

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

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


8
Список ссылок обеспечивает дополнительную семантику и доступность (например, программы чтения с экрана сообщат «Список из трех элементов» при входе в систему навигации).
robertc 05

@robertc Пункт для чтения с экрана очень хороший. Надо было поставить это на ответ! Я бы отметил, что это правильно. +1 в любом случае.
kikito

1

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


1

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

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


Причина, по которой я раньше использовал <ul> вместо множества ссылок в <div>, заключалась как раз в том, что <ul> были более семантическими. Но теперь <nav> стали более семантическими. Я запутался.
kikito 05

2
Элементы <ul> по-прежнему более семантичны, чем простые ссылки <a>, но <nav> более семантичны, чем <div>. <ul> vs <a> отдельно от <nav> vs <div>
whostolemyhat

Не заботиться о семантике - это не лучший вариант при написании HTML.
Эндрю Маршалл

1

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

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


Вот следующая статья, которую они написали css-tricks.com/wrapup-of-navigation-in-lists
Грэм
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.