Статьи

Должна ли навигация определяться в списках?

Январь 17, 2019

Интересная статья была опубликована на CSS-хитрости Криса Койера: навигация в списках: быть или не быть . Статья вызвала множество комментариев и дебатов. Вот резюме …

Столкнувшись с созданием меню навигации, большинство веб-разработчиков реализуют такой код, как: 

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Products</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
</nav>

Те, кто не эмигрировал из земли HTML4, пропустят <nav><ul id="nav">

Вопрос: нужны ли элементы списка?
Голые ссылки более чистые и чистые … 

 <nav>
	<a href="#">Home</a>
	<a href="#">Products</a>
	<a href="#">Services</a>
	<a href="#">About Us</a>
	<a href="#">Contact Us</a>
</nav>

До HTML5 списки требовались:

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

Эти проблемы в основном исчезают с введением HTML5-элемента <nav> Лишние элементы списка не нужны, потому что браузер / программы чтения с экрана понимают, что это блок навигации, и могут соответствующим образом обрабатывать ссылки.

Тем не менее, есть ряд веских причин для сохранения списков:

  1. Иерархические меню и подменю могут быть определены. Нет причин, по которым нельзя использовать другие элементы, хотя есть несколько преимуществ, например, 
     <nav>
	<h1>Main Menu</h1>
	<a href="#">Home</a>
	<a href="#">Products</a>
	<section>
		<h2>Product Menu</h2>
		<a href="#">Product One</a>
		<a href="#">Product Two</a>
	</section>
	<a href="#">Services</a>
</nav>
  2. Списки предоставляют дополнительные элементы для CSS-хуков и стилей.
  3. Списки — это широко распространенная методика, которую разработчики знают и ожидают.

Списки навигации укоренились в качестве окончательного метода. Мало кто из нас рассматривает вялую навигацию; это неправильно — но так ли это? Это будет зависеть от обстоятельств, и в семантических ссорах легко увязнуть, но я подозреваю, что Крис прав: списки часто не нужны.

Я собираюсь попробовать навигацию по голой ссылке в моем следующем проекте. Вы будете?

34
Share: