Не так давно в свет вышел новый стандарт разметки гипертекста html5, который открыл перед веб-мастерами огромный простор для улучшения понимания структуры сайта поисковыми роботами. Изменения коснулись и подходов к разметке навигации.
При использовании 4-го стандарта html оптимальным вариантом верстки меню для сайта был следующий:
<ul class="nav"> <li><a href="#">Пункт меню 1</a></li> <li><a href="#">Пункт меню 2</a></li> <li><a href="#">Пункт меню 3</a></li> </ul>
Ну а что? Все крайне логично и лаконично. Тег ul согласно документации W3C следует использовать для разметки списков с перечислением чего-либо, а что такое меню, если не список ссылок на конкретные структурные части нашего ресурса?
Новый подход к верстке меню в html5
С выходом 5-го html мы узнали о существовании нового тега nav и что его тоже вроде как следует использовать для разметки меню и, не мудрствуя слишком много, из симбиоза старых и новых знаний получилась конструкция следующего содержания:
разработка интернет сайта стоимость.
<nav> <ul> <li><a href="#">Пункт меню 1</a></li> <li><a href="#">Пункт меню 2</a></li> <li><a href="#">Пункт меню 3</a></li> </ul> </nav>
На первый взгляд все прекрасно, да и на второй ошибок особо здесь нет, НО! Списки предназначены просто для перечисления чего-либо по порядку. Они не предназначены для разметки навигации. И если раньше у нас особо не было выбора как размечать навигацию, то в новых реалиях все значительно упростилось.
Для того, чтобы поисковый робот понял, что перед ним находится элемент навигации по сайту одного наличия тега nav уже более чем достаточно. А дальше мы можем все максимально упростить:
<nav> <a href="#"> Пункт меню 1</a> <a href="#"> Пункт меню 2</a> <a href="#"> Пункт меню 3</a> </nav>
Среди преимуществ данного варианта разметки меню на html 5 мы можем выделить следующие:
- Уменьшая количество кода на странице мы упрощаем ее обработку браузерам и поисковым роботам, что положительно сказывается на SEO сайта.
- Меньше тегов — короче DOM структура документа, что тоже лишний плюс для обработки страницы различными приложениями.
- Чем лаконичнее код, тем он чище и проще к восприятию.
Как сверстать вложенные меню в html5?
Вложенность меню с использованием новых стандартов хоть и будет выглядеть непривычно с первого взгляда, но зная предназначение тегов 5-го html данную структуру становится достаточно просто понять:
<nav> <section> <a href="#"> Пункт меню 1</a> <nav> <a href="#"> Подпункт меню 1</a> <a href="#"> Подпункт меню 2</a> <a href="#"> Подпункт меню 3</a> </nav> </section> <a href="#"> Пункт меню 2</a> <a href="#"> Пункт меню 3</a> </nav>
Используя тег section мы объединяем группу ссылок в 1 логический элемент меню, дальше же действуем по принципу схожему с принципом вложенности списков: используя второй nav внутри первого мы сообщаем о принадлежности ссылок в этом теге к более низкому уровню навигации, тобишь говорим, что ссылки которые будут в нем содержаться это уже не пункты, а подпункты нашего меню.
Эта конструкция хоть и не привычна на первый взгляд, но все-же во многом проще, чем аналогичная структура выполненная списками.
Подводя итоги
Хоть подход с использованием списков во многом и устарел, но ничего плохого в нем по-прежнему нет. Упростить код или же нет зависит во многом от Вашего желания и особенностей проекта.
К примеру, если для оформления меню нужны дополнительные элементы, на которые нужно повесить всякие прикольные фишки в css, то лучше использовать списки, которые их вам предоставят, чем лепить вокруг ссылок пустые дивы.
