Структурированные теги HTML5
29-07-2010В HTML5 добавили несколько интересных и полезных тегов для структурирования вашей разметки. Многие из этих тегов заменят типичные элементы div которые мы часто используем. Начнем перечисление тегов:
<section></section>
section предназначено для тематический группировки контента, обычно ставится после заголовка, возможно в конце страницы. section может быть вложен в любой другой тег, если понадобится может содержать любое количество типичной разметки.
<header></header>
Используется для указания заголовка для section (разделов), также для группировки заголовков, но может также содержать дополнительную информацию о разделе.
<footer></footer>
footer обычно содержит информацию о разделе, ссылки на похожие документы, копирайты и т.д.
<nav></nav>
Определяет область навигации, как правило список ссылок. nav как правило должен располагаться между section, header и footer
<article></article>
Независимая запись в блоге, журнале и т.д.
<aside></aside>
Указывает вторичную информацию о записи, пояснение что ли.
Использование
Давайте теперь попробуем использовать эти теги для построения обычной страницы блога:
<!DOCTYPE html>
<html>
<head>
<title>Стандартный блог</title>
</head>
<body>
<header>
<h1><a href="#">Стандартный блог</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>
<header>
<h1><a href="#">Заголовок</a></h1>
</header>
<section>
<p>Тут текст...</p>
</section>
</article>
<article>
<header>
<h1><a href="#">Заголовок</a></h1>
</header>
<section>
<p>Тут текст...</p>
</section>
</article>
<article>
<header>
<h1><a href="#">Заголовок</a></h1>
</header>
<section>
<p>Тут текст...</p>
</section>
</article>
</section>
<footer>
<p>Copyright © 2008 All Rights<p>
</footer>
</body>
</html>
Этот пример достаточно многозначен но хорошо показывает места применения нужных тегов.
