Семантическая разметка
Как известно в HTML5 появились новые элементы для секционирования документа. Использование этой разметки не предоставляет никаких мгновенных преимуществ. Главным плюсом такой разметки является то, что она помогает ботам поисковиков лучше контент сайта понимать.
Кто верстал в HTML4, что-то подобное на уровне DIV’ов делал. Сейчас же можно новые элементы использовать. Плюс в том, что старый код, в случае необходимости, не много претерпит изменений, так как интеграция с css полная у спецификации.
Новые элементы секционирования документа в HTML5
При разработке HTML5 учитывался предыдущий опыт использования HTML. В компании Google проанализировав миллионы страниц обнаружили огромное количество похожих блоков. Например, для разметки нижнего колонтитула страниц многие разработчики используют в элементе DIV атрибут id=»footer», для самой статьи id=»content», для навигации id=»navigation». Очевидно, было бы удобно ввести подобные теги на уровне спецификации, что и сделали.
Таблица 1. Новые элементы
| Элемент секционирования | Описание |
| header | Содержимое верхней (начальной) части страницы или ее секции. По сути, является контейнером для вступительных элементов вроде заголовка или логотипа. |
| footer | Содержимое нижней (завершающей) части страницы или ее секции. Юзается для «подвала» сайта. Как правило содержит информацию о разделе: имя автора, ссылки на похожие документы, копирайт и т.д. |
| section | Секция веб-страницы. Можно использовать в тех случаях, когда у каждой секции имеется свой, отдельный заголовок HTML. Как пример, главная страница этого блога, ну или любого сайта, где на главной выводится лента новостей. Каждая новость в своём блоке section со своим заголовком и телом новости. |
| article | Для основного контента: статей, комментариев, новостей и т.д. |
| aside | Связанное содержимое или выдержка. Используется для дополнительного контента (например, справка о стране). |
| nav | Навигация. Содержит информацию о структуре и архитектуре сайта, его навигационных особенностях. |
Ко всем перечисленным элементам могут применяться стили CSS (точно так же, как к таким тэгам как <body> и др).
Как пример, ваша страница может иметь такой вид:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5</title> </head> <body> <header> <hl>Заголовок</hi> <h2>Подзаголовок</h2> </header> <div id="container"> <nav> <h3>Навигация</h3> <a href="">Ссылка l</a> <a href="">Ссылка 2</a> </nav> <section> <article> <header> <hl>Заголовок статьи 1</hl> </header> <p>Тело статьи</p> <footer> <h2>Подвал статьи (Автор и т.п.)</h2> </footer> </article> <article> ... </article> <article> ... </article> </section> <footer> <h2>Подвальчик</h2> </footer> </div> </body> </html>
CSS и переход с HTML4 на HTML5
Как я уже сказал, для новых элементов стили можно без проблем задавать. То есть, мало того, что эти элементы упрощают вёрстку и понимание кода, так ещё и проблем с оформлением нет. Видно, что для перехода к этим элементам, почти ничего делать то не надо. Раньше мы все использовали: для хэдера <div id="header"></div>, нижней части <div id="footer"></div>, навигации <div id="nav"></div>, и т.д. Теперь же вместо DIV’а подставляем новые элементы.
В плане CSS же…Если раньше было вроде:
#header {
background-color: #000;
display:block;
text-align:center;
}
#header h2 {
margin: Opx;
}
#nav {
color:#fff;
}
То теперь будет что-то вроде:
header {
background-color: #000;
display:block;
text-align:center;
}
/* Можно для вложенных элементов */
header h2 {
margin: Opx;
}
nav {
color:#fff;
}
То есть, поменялись только идентификаторы элементов.
К слову, нет такого понятия «типичная страница HTML5». На самом деле страница может быть любой. То есть, хедер не обязательно сверху, навигация не обязательно справа и т.д.
Семантика, визуализация и боты
Стоить заметить, что браузеры не визуализируют содержимое так, как если бы они действительно понимали семантический смысл новых элементов. Истина же состоит в том, что независимо от названия тегов (можно было вместо <header> написть <trololo>), визуализированы они будут одинаково. Единственным исключением является браузер Internet Explorer, который требует, чтобы элементы были частью DOM. Ну, IE…такой IE =/
Что же касается поисковиков… Многие пишут, что новая разметка позволяет поисковикам лучше контент сайта понимать. Решил у сапорта Яши спросить, вот ответ:
Лучше использовать семантически верную разметку, так роботам проще понимать какая часть контента, к чему относится, и в будущем она будет находить все более широкую поддержку, в т.ч. со стороны поисковых машин. К примеру, на текущий момент семантически верная разметка может дать небольшой плюс в отношении формирования сниппета в результатах поиска. Что касается ранжирования и, тем более, индексирования, то семантичность разметки далеко не самый важный фактор.
Кто не в курсе, сниппет — краткая «выжимка» содержания документа, показывается в результатах поиска и располагается сразу под заголовком найденной страницы. То есть, это то, что юзер видит в результатах поисках. И, как вы сами понимаете, для веб-мастера очень важны правильные сниппеты.
Заключение: нет никаких сложностей в понимании и использованию новой разметки. Думается, она даже удобней старых DIV’ов. К тому же, подобная разметка помогает ботам правильно понимать содержание, что в итоге влияет положительно на сниппеты сайта и ранжирование. Одни плюсы (: