Список HTML5 тегов

В HTML5 было добавлено много новых тегов, которые улучшают семантику сайта и позволяют поисковым системам лучше понимать структуру сайта и качественно его индексировать. Также добавлены теги, которые дают совсем новые возможности, например тег canvas (холст) позволяет рисовать векторную графику без использования сторонних плагинов.

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

Структурные теги

header - шапка сайта. Часто внутри размещают логотип сайта, навигацию

nav - навигация. Внутри используется список со ссылками

main - главный блок с контентом

section - используется для повторяющихся блоков сайта

aside - боковая панель сайта

footer - подвал сайта

article - контент страницы, например статья, новость и т. д.

Теги для новых возможностей HTML5

canvas - создает контейнер для отрисовки векторной графики с помощью JavaScript. Нативная замена flash

video - воспроизводит видеофайлы

audio - воспроизводит аудиофайлы

source - указывает путь к файлу в атрибуте src для тегов video и audio

track - субтитры, комментарии для тегов video и audio

Другие теги

figure - обрамляет контент, который имеет описание. Частый пример - это карточка с картинкой и описанием

figcaption - задает описание внутри тега figure

wbr - применяется внутри слова, указывает в каких местах можно переносить слово, если оно не вмещается

time - тег для указания даты

mark - выделяет текст

progress - прогрессбар

meter - индикатор, можно указать значения значение которое будет оптимальным, низким и высоким

datalist - указывает возможные варианты текста в виде списка при наборе в текстовом поле

details - содержит информацию, которую можно показать (как спойлер), по умолчанию скрыта

summary - заголовок тега details, при клике по которому будет показываться спойлер, должен быть внутри details

embed - используется для подключения плагинов