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

Question

[Par Mactep]

Издревле навигационное меню версталось приблизительно так

<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>

Comments

[Par Mactep]

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

Answer 1

[Tony V]

Я почти всегда верстаю через список.
Для 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"

Comments

[Par Mactep]

За статью отдельное спасибо.

Answer 2

[Юрий Лобанов]

Я бы сказал, что смотреть надо по ситуации. Если предполагается блочная модель элементов меню, то взять список, который уже блочный. Если строковая - то второй вариант. Ясное дело, что display можно переопределить, но чем меньше телодвижений, тем лучше.
А бездоказательно - мне больше нравится вариант со списком. Не то привычка, не то эстетика кода - без списка как-то куце выглядит.
Кроме того, внутри nav можно задать несколько списков, и раскидать их по левому и правому краю. Если использовать ссылки, то все равно придется оборачивать эти группы в контейнеры.

Comments

[Par Mactep]

Вот поэтому я и задал этот вопрос. Достаточно часто приходится работать с чужим кодом, так и с моим приходится кому-то работать. Хотелось бы держать код на уровне. Например, то что для вас ощущается куцо - для меня отсутствие избыточности и более чистый код. Хотя возможность добавления еще одного списка - аргумент, причем достаточно весомый. В то же время, еще один список это, скорее всего, другой элемент и вероятно требует еще одного тега nav или menu.

[Юрий Лобанов]

@parmactep ну вот к примеру у Вас слева пункты меню, а справа иконка login, смена языка и feedback form, к примеру. Как бы стали верстать? Я вот сделал бы два списка. А Вы предлагает делать два nav и отбивать влево и вправо их?

[Par Mactep]

@iiil Мне кажется это не самый удачный пример. Я бы им задал общий контейнер. nav с ссылками пунктами меню ушли бы влево, а форма и смена языка вправо.

[Par Mactep]

Сейчас пришла в голову другая мысль. Списки удобно на тот случай если меню необходимо добавить многоуровневость.

[Юрий Лобанов]

@parmactep кстати, да. Чет мне в голову не пришло.

Answer 3

[xfenix]

Оба варианта легитимны.
Вариант с простыми ссылками можно использовать если вам не понадобится делать вложенность или у вас нет сложных декораций, требующих оборачивающих элементов. И браузеру будет легче, всё таки каждый уровень вложенности DOM - лишний напряг.
Да если и ещё css писать в духе "nav ul li a" то любой лишний элемент с такими селекторами будет убивать вам производительность отрисовки.

Answer 4

[Михаил Синяков]

если не ошибаюсь, видел вот такой вариант написания

<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>