Новые семантически значимые элементы тегов HTML5

При структурировании HTML-страницы стандартный способ разметки верхнего колонтитула и блока навигации выглядит примерно так:

<div class="header">

<div class="navigation">

<ul class="nav-list">

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="About">About</a></li>

</ul>

</div> <!— конец navigation —>

</div> <!— конец header —>

Однако взгляните, как все это можно сделать с использованием HTML5:

<header>

<nav>

<ul id="nav-list">

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="About">About</a></li>

</ul>

</nav>

</header>

Как вам результат? Вместо безликих тегов <div> для каждого структурного элемента (пусть даже и с добавленными именами классов) HTML5 дает нам семантически более значимые элементы. Общие структурные разделы страниц, например верхний колонтитул и навигационное меню (и многие другие, в чем вы вскоре убедитесь), располагают своими собственными тегами элементов. Наш код стал намного более понятным благодаря тегу <nav>, который «говорит» браузерам: «Эй, вот этот раздел является навигационным». Это хорошая новость для нас, но, возможно, более важно то, что это хорошая новость и для поисковых механизмов. Теперь они смогут лучше понимать наши страницы, чем когда-либо прежде, и соответствующим образом ранжировать их содержимое.

При создании HTML-страниц я часто использую именно этот подход, зная, что они затем будут переданы команде разработчиков серверных приложений (это такие крутые ребята, имеющие дело с PHP, Ruby, .NET, ColdFusion и т. д.), прежде чем наконец будут размещены в Интернете. Чтобы оставаться в хороших отношениях с разработчиками серверных приложений, я часто снабжаю комментариями закрывающие теги </div>, благодаря чему другие люди (и я сам) могут с легкостью разобраться, где заканчиваются разделы <div>. HTML5 в значительной степени сводит на нет эту задачу. При взгляде на закрывающий тег, например </header>, сразу понятно, какой элемент он закрывает, и при этом не требуются никакие комментарии.

Здесь я лишь вкратце перечислил, чем для вас полезны семантические HTML5 элементы. Прежде чем двигаться дальше, вам предстоит познакомиться еще кое с чем, без чего вся эта новая эра веб-дизайна не наступила бы. Это CSS3.