Новые теги HTML5

Какие теги добавили в язык HTML5?

В язык HTML5 добавили множество новых тегов:

- теги семантически описывающие структуру страницы,
- теги описывающие новые технологии,
- теги обогащающие язык HTML.

Семантическое описание структуры страницы

Новые теги HTML5 семантически описывающие структуру страницы, предназначены для того чтобы компьютерная программа (например поисковый робот) смогла отличать основной контент, от остальных частей страницы: шапки, подвала, основного меню ссылок, сайдбара, повторяющихся блоков.

Список новых тегов HTML5 отвечающих за семантическое разделение страницы:

<article> </article> - теги обрамляющие основной контент страницы: статью, запись в блоге, новость, первую запись форума и т.п. (что для поискового робота является основным контентом уточняйте в службе поддержки поисковиков).

<aside> </aside> - теги обрамляющие сайдбар. Сайдбар - это так называемая "боковая панель" которая обычно содержит блоки рубрик (категорий), архива, облака тегов (меток) и т.п.

Тегами aside также можно обрамлять счетчики, виджеты (например комментарии от вконтакта), социальные кнопки. Обычно ссылки находящиеся в сайдбаре, ведут на страницы не содержащие основной контент страницы, т.е. не имеющие в своём коде теги article

<footer> </footer> - теги обрамляющие нижнюю часть сайта, так называемый "подвал страницы", который может содержать имя автора (компании), контакты (адреса, телефоны), дату, правовую информацию и т.п.

<header> </header> - теги обрамляющие элементы дизайна верхней части сайта, так называемая "шапка страницы".

<nav> </nav> - теги обрамляющие основное меню ссылок на сайте. Обычно ссылки находящиеся в основном меню ссылок, ведут на страницы содержащие основной контент страницы, т.е. имеющие в своём коде теги article

<section> </section> - теги обрамляющие повторяющиеся части страницы или основного контента, например если на странице находятся несколько глав рассказа, то каждую главу можно поместить между этими тегами.

Или если вы нажмете на ссылку в сайдбаре (например по ссылке какой-нибудь рубрики), то появится страница на которой будут ссылки с описаниями, ведущие на страницы принадлежащие к данной рубрике, так вот ссылки с описаниями можно обрамлять тегами section, а также товары с описаниями в интернет магазине и т.п.

Семантика на уровне текста

<mark> </mark> - текст находящийся между этими тегами становится "выделенным". Одно из предназначений тегов mark, обрамлять слова в тексте которые например совпадают со словом введённым пользователем в поисковую строку.

<time> </time> - теги предназначены для создания дат и/или времени в формате ISO вида:
YYYY-MM-DDThh:mm:ss, такой формат понятен компьютерным программам. Теги time могут обрамлять дату или текст, если тег обрамляет текст, то в него добавляют атрибут datetime, значением которого выступает дата и/или время в формате ISO.

<meter> </meter> - теги предназначены для вывода статического индикатора шкалы, при котором результат измерения не меняется. Для работы нужно минимальное и максимальное значения.

<progress> </progress> - теги предназначены для вывода динамического индикатора шкалы (например шкалы загрузки файла), при котором результат измерения меняется в реальном времени.

Теги HTML5 описывающие новые технологии

<audio> </audio> - теги предназначены для воспроизведения аудиофайлов, без использования сторонних программ (плагинов, расширений).

<video> </video> - теги предназначены для воспроизведения видеофайлов, без использования сторонних программ (плагинов, расширений).

<source /> - тег предназначен для указания пути к аудио/видео файлам, находится внутри тегов audio и video.

<canvas> </canvas> - теги предназначены для создания специальной области на сайте, в которой можно создавать векторные фигуры и с помощью языка программирования JavaScript, манипулировать ими. Canvas в будущем, должен заменить Flash-технологию.

Теги обогащающие язык HTML5

Список новых тегов HTML5, обогощающих язык:

<command /> - тег должен находиться между тегами menu, используется при создании сценариев на JavaScript.

<datalist> </datalist> - теги предназначены для создания списка, который будет выводится при наборе в текстовом поле.

<details> </details> - теги предназначены для хранения информации, которая либо скрыта, либо отображена (работает наподобие спойлера).

<figcaption> </figcaption> - теги обрамляют описание какого-либо объекта (например рисунка), находятся между тегами figure,..

<figure> </figure> - теги группируют различные объекты страницы имеющие свои описания, например фотографии с описанием, товары с описанием и т.д.

<hgroup> </hgroup> - теги предназначены для группировки заголовков h*

<keygen /> - тег используется для генерации открытых/закрытых пар ключей, шифрования/расшифровки данных, создания/проверки цифровой подписи.

<menu> </menu> - между этими тегами помещают тег command.

<output> </output> - теги предназначены для вывода работы скрипта.

<rp> </rp> - теги предназначены для браузеров которые не поддерживают теги ruby.

<rt> </rt> - теги находятся между тегами ruby, предназначены для обрамления аннотации.

<ruby> </ruby> - теги обрамляют текст и аннотацию к нему.

<summary> </summary> - теги обрамляют заголовок, если по нему щелкнуть то появится текст (можно использовать как спойлер), находятся между тегами details.

<wbr /> - тег указывает браузеру в каком месте переносить слово, если это слово не вмещается в окно браузера.

Читать далее: Устаревшие теги HTML5