Структурные теги HTML5
Спецификация HTML5 добавила весьма ограниченное число тегов для структурирования вашей разметки. Эти теги могут заменить типичные div контейнеры в вашем коде. Итак, давайте приступим к изучению.
Тег section
Тег section группирует контент по тематике, или, другими словами, определяет раздел документа. Обычно предшествует header, может находиться в footer. Тег section может быть заключен внутрь другого тега section, если необходимо, и содержать любой объем разметки. В обычном html, как правило, вместо тега section используют div.
Тег header
Тег header (шапка) обычно содержит заголовок или группирует заголовки, но также может содержать информацию о секции.
Другими словами тег header определяет верхний колонтитул сайта (шапку сайта).
Тег footer
Тег footer (подвал) обычно содержит информацию о секции, например: автор статьи, дата, авторское право и т.д.
HTML
<footer>
<p>Copyright © 20011 All Rights</p>
</footer>Тег nav
Тег nav определяет навигационную область, обычно это список ссылок. Тег nav является родным братом основной section (секции), header (шапки) и footer (подвала).
HTML
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Скачать</a></li>
<li><a href="#">Архив</a></li>
<li><a href="#">О Нас</a></li>
</ul>
</nav>Элемент nav можно расположить также, например, в теге header.
Тег aside
Тег aside определяет контент, который расположен вокруг основного контента. Это может быть боковая панель (sidebar), содержащая ряд ссылок на статьи, на архив, на метки.
Тег article
Тег article определяет любую независимую запись (статью) на сайте, или, например, это может быть резюме, описание товара в интернет магазине и так далее.
Тег figure
Иногда бывает необходимо разместить изображение и прилагающийся к нему текст как единую иллюстрацию. Элемент figure указывает на то, что текст и изображение являются частями единого целого.
HTML
<figure>
<legend>
Тут я описываю изображение
</legend>
<img alt="" src="opa.png" />
</figure>Тег dialog
Тег dialog – это та область, где отображается комментарии (беседа, разговор). Тег dialog состоит из следующих частей:
- сам тег
dialog, определяющий блок с комментариями - тег
dtопределят того кто говорит - тег
ddопределяет текст комментария
HTML
<dialog>
<dt>
Вася
</dt>
<dd>
я тут был
</dd>
<dt>
Петя
</dt>
<dd>
я подтверждаю, все что написал Вася правда
</dd>
</dialog>Разметка на основе тегов HTML5
Итак, давайте объединим наши структурные теги на странице.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Обычный блог</title>
</head>
<body>
<header>
<h1><a href="#">Standard Blog</a></h1>
</header>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Скачать</a></li>
<li><a href="#">Архив</a></li>
<li><a href="#">О Нас</a></li>
</ul>
</nav>
<section>
<article>
<h2><a href="#">Title</a></h2>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
<article>
<h2><a href="#">Title</a></h2>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
</section>
<footer>
<p>Copyright © 20011 All Rights</p>
</footer>
</body>
</html> Как вы можете видеть, сами теги более наглядны, чем, если бы вы использовали обычные идентификаторы (id) для тегов div. Также очевидно преимущество в использовании адекватных закрывающих тегов, таких как article. Например, разметка документа становится более понятной (и для поисковиков в том числе), если вместо непонятного блока с id="something",(где закрывающий тег еще надо поискать!) использовать тег article.
Стоит ли использовать структурные теги сейчас?
Фактически, да, если соблюдать несколько дополнительных моментов. Данные теги будут работать в современных браузерах и, вероятно, в IE6. Но есть несколько моментов, которые необходимо соблюдать, если мы захотим использовать структурные теги html5 сегодня.
Во-первых, так как большинство браузеров не понимает doctype HTML5, то они и не знают о новых тегах в HTML5. К счастью, браузеры довольно восприимчивы, что позволяет им иметь дело с неизвестными тегами. Единственная проблема в том, что неизвестные теги не имеют стилей по умолчанию, и такие теги рассматриваются как встроенные (inline) теги. Но наши новые теги HTML5 структурные и, очевидно, должны быть блочными элементами. Итак, когда мы стилизуем их в css, то нам необходимо включить объявление display:block.
Просто включите небольшую часть кода в ваш CSS и новые теги HTML5 готовы к работе. И, конечно, как только HTML5 окончательно распространиться, описание display:block можно удалить, поскольку это описание будет включено в стили по умолчанию.
Поддержка IE
Есть проблема, если вам требуется поддержка IE. Оказывается, движок IE будет работать с новыми тегами, но не будет признавать любой CSS стиль, примененный к ним. К счастью, исправить это можно, включив небольшой кусок JavaScript. Все что нам понадобится, это включить следующий код:
JavaScript
<script>
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');
</script>Данный код можно включите непосредственно в head или подключить через внешний файл.
Заключение
Таким образом, вы можете прямо сейчас структурировать ваши документы посредством новых тегов HTML5.
Комментарии к статье