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

Автор: Евгений Рыжков и Татьяна Головко Дата публикации: 12.03.2011

Заботой HTML5 является не только сокращение кода разметки (хотя в итоге оно так и получается). Он так же определяет ряд новых семантических тегов. Спецификацией HTML5 определены следующие новые элементы:

<section>

Представляет общий раздел документа или приложения. Это тематическая группировка контента, который, как правило, содержит заголовок. Примерами применения <section> могут быть пронумерованные разделы диссертации или диалоговые окна с вкладками. Главную страницу можно разбить на несколько <section>. Например, введение, новости и контактная информация.

<nav>

Этот элемент представляет блок на странице с ссылками на другие страницы или какие-то части текущей. Другими словами — это навигационный блок. Не все группы ссылок следует заключать в элемент <nav> — подходят только основные навигационные блоки. Т.е. дублирующие ссылки основной навигации в подвале заключить в <nav> будет ошибкой. Элемента <footer> будет достаточно самого по себе, а <nav> в большинстве случаев будет лишним.

<article>

Это элемент обозначает автономную часть страницы, документа, приложения или сайта, которая способна работать самостоятельно и ее можно использовать повторно. Это может быть сообщение на форуме, статья в журнале, запись в блоге, комментарий пользователя, интерактивный виджет или гаджет и любые другие независимые элементы страницы.

<aside>

Этот элемент обозначает, что данный блок имеет косвенное отношение к основному содержимому и может быть рассмотрен отдельно от него. Такие блоки в типографии часто представлены в виде боковой панели. Этот элемент может быть использован для типографических эффектов, например, чтобы вынести цитаты в сторону, для рекламных блоков или блоков навигации.

<hgroup>

Элемент представляет заголовок раздела. Служит для группировки элементов h1-h6 когда заголовок многоуровневый. Например, когда помимо основного заголовка есть подзаголовок или альтернативный заголовок, или, возможно, слоган.

<header>

Элемент представляет собой группу вступительных или навигационных средств. <header> обычно содержит элементы заголовков (h1-h6, hgroup), но не обязательно. Он так же может быть контейнером для таблиц, форм поиска или логотипа.

<footer>

Элемент <footer> выступает в роли подвала (колонтитула) для ближайшего предка (в случае, если таковой есть и он является секционным блоком: article, aside, nav, section) или корневого элемента. Footer обычно содержит информацию о секции: кто автор, ссылки на связанные документы, авторские права и тому подобное. Footer не обязательно может быть в конце секции, где обычно мы его размещаем. Когда подвал содержит целые разделы, все они воспринимаются как дополнительная информация, приложения к основному содержимому.

<time>

Служит для обозначения времени или даты на странице.

<mark>

Служит для выделения текста в документе по каким-то критериям.

Я знаю, что тебе хотелось бы уже сейчас начать использовать эти элементы. Но не так все просто, надо сперва глубже разобраться в этой теме.

Куда дальше