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

Question

[RinatWorld]

Например такое:

Тут пишут, что не стоит использовать ul li, лучше тег nav. А здесь, что тег nav не всеми браузерами поддреживается. Ну и в общем, я решил сделать так:

<div id="mainmenu" role="navigation">
		<a href="#" id="logo"></a>
		<a href="#">Пункт 1</a>
		<a href="#"  class="selectedItem"> Пункт 2 (выделенный)</a>
		<a href="#">Пункт 3</a>
	</div>

В #logo фоном загружается картинка с логотипом (он может быть графическим, без текста), а selectedItem подсвечивается другим цветом. В чем могут быть минусы этого варианта с точки зрения кроссбраузерности, сео и вообще? И если можно, то как сделать лучше?

Comments

[Ankhena]

1. Это реальная поддержка браузерами: https://caniuse.com/#feat=html5semantic (смотрите внимательно, частичная там относится к main)
2. Если список, то ul, а не ol.
3. Не стоит использовать id для стилизации.

[RinatWorld]

Ankhena, то есть оптимальным вариантом будет этот?

<nav id="mainmenu" role="navigation">
    <a href="#" class="logo"></a>
    <a href="#">Пункт 1</a>
    <a href="#"  class="selectedItem"> Пункт 2</a>
    <a href="#">Пункт 3</a>
</nav>

[Ankhena]

RinatWorld,

есть оптимальным вариантом будет этот?

Оптимальность зависит от параметра по которому оптимизируете ;)

Зачем role, если nav?
По п.3. этот код точно не проходит.

Answer 1

[puet]

<ul>
  <li><a href="#">Пункт &</a></li>
  <li><a href="#">Пункт &</a></li>
  <li><a href="#">Пункт &</a></li>
  <li><a href="#">Пункт &</a></li>
</ul>

Comments

[RinatWorld]

А в чем плюс этого варианта перед моим? Код стал сложнее на 4 элемента и увеличился уровень вложенности

[Uwe_Boll]

RinatWorld, Семантика

Answer 2

[Василь Бойко]

<nav class="nav" role="nav">
  <ul class="nav-list">
    <li class="nav-item"><a href="#" class="nav-link">Item-1</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Item-2</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Item-3</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Item-4</a></li>
  </ul>
</nav>

А для того, чтобы тег nav поддерживался старыми браузерами, подключаем скриптик

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>.

А ещё лучше вот статья, прочтите: https://habrahabr.ru/post/90384/

Comments

[RinatWorld]

По вашему ответку складывается ощущение, что чем сложнее структура, тем лучше) Почему считаете, что здесь действительно нужен список?

[Василь Бойко]

RinatWorld, омг) нет времени объяснять, почему так правильно. Со временем поймете)