Как правильнее верстать навигацию с точки зрения семантики?

Издревле навигационное меню версталось приблизительно так
<ul class="menu">
	<li><a href="#">Пункт меню</a></li>
	<li><a href="#">Еще пункт</a></li>
</ul>

С приходом html5 заметил, что такую конструкцию просто оборачивают в тег nav, например, вот так:
<nav class="menu">
	<ul>
		<li><a href="#">Пункт меню</a></li>
		<li><a href="#">Еще пункт</a></li>
	</ul>
</nav>

Интересует, правильным ли будет (с вашей точки зрения) избежать избыточности и использовать следующий подход:
<nav>
	<a href="#">Пункт меню</a>
	<a href="#">Еще пункт</a>
</nav>
  • Вопрос задан
  • 4825 просмотров
Решения вопроса 3
vanton
@vanton
Человек и пароход
Я почти всегда верстаю через список.
Для nav>ul>li отлично задаются стили таблиц
nav{
  display: table;
  table-layout: fixed;
  width: 100%;
}
ul{
  display: table-row;
}
li{
  display: table-cell;
}

Что позволяет сверстать однострочное меню с одинаковой шириной элементов

Хорошая статья (англ) по этой теме: css-tricks.com/navigation-in-lists-to-be-or-not-to-be
В ней еще советуют добавить к nav аттрибут role="navigation"
Ответ написан
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Я бы сказал, что смотреть надо по ситуации. Если предполагается блочная модель элементов меню, то взять список, который уже блочный. Если строковая - то второй вариант. Ясное дело, что display можно переопределить, но чем меньше телодвижений, тем лучше.
А бездоказательно - мне больше нравится вариант со списком. Не то привычка, не то эстетика кода - без списка как-то куце выглядит.
Кроме того, внутри nav можно задать несколько списков, и раскидать их по левому и правому краю. Если использовать ссылки, то все равно придется оборачивать эти группы в контейнеры.
Ответ написан
@xfenix
Оба варианта легитимны.
Вариант с простыми ссылками можно использовать если вам не понадобится делать вложенность или у вас нет сложных декораций, требующих оборачивающих элементов. И браузеру будет легче, всё таки каждый уровень вложенности DOM - лишний напряг.
Да если и ещё css писать в духе "nav ul li a" то любой лишний элемент с такими селекторами будет убивать вам производительность отрисовки.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@pvpshoot
Верстальщик
если не ошибаюсь, видел вот такой вариант написания
<nav>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Lorem</a></li>    
</nav>

На w3c приведен такой пример
<nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы