В данной главе перечисляются все новые элементы 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 | Указание местной даты и времени |
| Ввод адресов электронной почты | |
| 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> | Определяет видео контент |
