Навігація списком

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

<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, скористаються <ul id="nav"> або аналогом замість <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. Списки - це широко застосовуваний метод і розробники знають як з ним працювати і що від нього очікувати.

Навігація списком міцно увійшла в розробку як один з основних методів. Але, що чекає нас в майбутньому?

Джерело