Новые элементы HTML5

В данной главе перечисляются все новые элементы HTML5 с описанием, для чего они используются.

Новые семантические/структурные элементы

HTML5 предлагает новые элементы для лучшего структурирования документа:

Тег Описание
<article> Определяет статью в документе
<aside> Определяет контент, находящийся в стороне от основного контента страницы
<bdi> Изолирует текст от изменения направления вывода
<details> Определяет дополнительную информацию, которую пользователь может открывать или закрывать
<dialog> Определяет диалоговое окно
<figcaption> Определяет подпись к элементу <figure>
<figure> Используется для группирования различных самодостаточных элементов
<footer> Определяет "подвал" документа или раздела
<header> Определяет "шапку" документа или раздела
<main> Определяет основной контент документа
<mark> Определяет маркированный/выделенный текст
<menuitem> Определяет команду/пункт всплывающего меню
<meter> Определяет оценочный индикатор
<nav> Определяет набор ссылок навигации
<progress> Определяет индикатор прогресса выполнения задачи
<rp> Определяет текст для вывода в браузерах, не поддерживающих элемент <ruby>
<rt> Определяет объяснение/произношение символов (для азиатской типографии)
<ruby> Предназначен для добавления небольшой аннотации (для азиатской типографии)
<section> Определяет раздел в документе
<summary> Определяет видимый заголовок для элемента <details>
<time> Определяет дату/время
<wbr> Определяет место для переноса строки в тексте

Новые элементы форм

Тег Описание
<datalist> Определяет список предопределенных вариантов значений для элемента <input>
<keygen> Определяет поле-генератор ключей
<output> Определяет результаты вычислений

Новые типы поля ввода (элемент <input>)

В HTML5 были добавлены новые значения для атрибута type элемента <input>:

Значение Описание
color Виджет для выбора цвета
date Поле выбора календарной даты
datetime Указание даты и времени
datetime-local Указание местной даты и времени
email Ввод адресов электронной почты
month Выбор месяца
number Ввод чисел
range Ползунок для выбора чисел в указанном диапазоне
search Поле поиска
tel Поле ввода телефонных номеров
time Выбор времени
url Поле ввода веб-адресов
week Выбор недели

Новые атрибуты поля ввода (элемент <input>)

В HTML5 были добавлены новые атрибуты для элемента <input>:

Атрибут Описание
autocomplete Включает/отключает автозаполнение элемента
autofocus Автоматически передает фокус элементу
form Определяет к какой форме относится элемент ввода
formaction Определяет, куда будут отправлены данные формы
formenctype Определяет способ кодировки отправляемых на сервер данных формы
formmethod Определяет метод отправки на сервер данных формы
formnovalidate Отключает встроенную проверку корректности введенных данных формы
formtarget Определяет, куда загружать ответ сервера после отправки данных формы
height Определяет высоту элемента ввода
width Определяет ширину элемента ввода
list Ссылается на элемент со списком предопределенных значений
min Определяет минимально допустимое для ввода значение
max Определяет максимально допустимое для ввода значение
multiple Позволяет вводить больше одного значения
pattern Определяет регулярное выражение, по которому проверяются вводимые данные
placeholder Определяет "заполнитель" для текстового поля
required Определяет поле формы, как обязательное для заполнения
step Определяет шаг изменения числа для элемента ввода

Подробнее о атрибутах элемента <input> см. в справочнике по HTML тегу <input>.

Новый синтаксис атрибутов

HTML5 допускает использование четырех различных видов синтаксиса определения атрибутов элементов.

В следующей таблице приведены примеры разного синтаксиса определения атрибутов тега <input>:

Тип Пример
Пустой <input type="text" value="John" disabled>
Без кавычек <input type="text" value=John>
С двойными кавычками <input type="text" value="John Doe">
С одинарными кавычками <input type="text" value='John Doe'>

В HTML5 в зависимости от требований атрибута, можно использовать все четыре вида синтаксиса.

Графика в HTML5

Тег Описание
<canvas> Определяет область, в которой можно рисовать при помощи скриптов (обычно JavaScript)
<svg> Рисует масштабируемую векторную графику

Новые медиа элементы

Тег Описание
<audio> Определяет аудио контент
<embed> Определяет контейнер для внешнего (не HTML) приложения
<source> Определяет медиа ресурс для медиа элементов (<video> и <audio>)
<track> Определяет текстовую дорожку для медиа элементов (<video> и <audio>)
<video> Определяет видео контент