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

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

105 голосов
/ 05 апреля 2011

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

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

Ответы [ 8 ]

60 голосов
/ 05 апреля 2011

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

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

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

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

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

3 голосов
/ 05 апреля 2011

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

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

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

2 голосов
/ 05 апреля 2011

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

1 голос
/ 01 декабря 2013

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

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

1 голос
/ 21 июня 2012

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

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

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

1 голос
/ 05 апреля 2011

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

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

1 голос
/ 05 апреля 2011

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

1 голос
/ 05 апреля 2011

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

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

...