Новые элементы в HTML5
Интернет сильно поменялся с того момента, как HTML 4.01 стал стандартом в 1999.
Сегодня, некоторые элементы в HTML 4.01 являются устаревшими, никогда не используемыми, или используемыми не по назначению. Эти элементы удалены или переписаны в HTML5.
Чтобы лучше справляться с использованием сегодняшнего Интернета, HTML5 также включает в себя новые элементы для улучшения структуры, графику, медиа-контент, и лучшую обработку формы.
Новые элементы разметки
Новые элементы для улучшения структуры:
| Тег | Описание |
|---|---|
| <article> | Для внешнего содержимого, такого как текст из статей новостей, блога, форума, или любого другого содержимого из внешних источников |
| <aside> | Для содержания, находящегося в стороне от основного содержания. Содержание в стороне должно быть связано с окружающим содержанием |
| <command> | Кнопка, переключатель или флажок |
| <details> | Для описания подробностей о документе, или части документа |
| <summary> | Подпись, или резюме, внутри деталей элемента |
| <figure> | Для группировки раздела автономного содержания, может быть видео |
| <figcaption> | Заголовок секции фигуры |
| <footer> | Для колонтитула документа или раздела, может включать имя автора, дату документа, контактную информацию, или информация об авторских правах |
| <header> | Для введения документа или раздела, может включать навигацию |
| <hgroup> | Для раздела заголовков, использующего от <h1> до <h6>, где самый крупный является основным заголовком раздела, а другие подзаголовками |
| <mark> | Для текста, который должен быть выделен |
| <meter> | Для измерения, используется только если максимальное и минимальное значения известны |
| <nav> | Для секции навигации |
| <progress> | Для хода состояния работы |
| <ruby> | Для анотаций (заметок на китайском или символах) |
| <rt> | Для объяснения аннотации |
| <rp> | Что показывают браузеры, не поддерживающие элемент ruby |
| <section> | Для раздела в документе. Таких как главы, заголовки, колонтитулы или любые другие разделы документа |
| <time> | Для определения времени или даты, или обоих |
| <wbr> | Переносы слов. Для определения возможности для разрыва строки. |
Новые элементы медиа
HTML5 обеспечивает новый стандарт для медиа-контента:
| Тег | Описание |
|---|---|
| <audio> | Для мультимедийного контента, звуки, музыка или другой аудио поток |
| <video> | Для видео контента, такого как клип или другого видео потока |
| <source> | Для медиа-ресурсов для медиа-элементов, определенных внутри видео или аудио элементов |
| <embed> | Для встроенного содержания, такого как плагин |
Элемент канва
Элемент canvas использует JavaScript для создания графики на веб-странице.
| Тег | Описание |
|---|---|
| <canvas> | Для создания графики с помощью сценария |
Новые элементы формы
HTML5 предлагает больше элементов формы, с большей функциональностью:
| Тег | Описание |
|---|---|
| <datalist> | Список вариантов для входных значений |
| <keygen> | Генерация ключей для аутентификации пользователей |
| <output> | Для различных видов выхода, таких, как выход написанный сценарием |
Новый тип атрибутов входных значений
Также атрибут type входного элемента имеет много новых значений, для лучшего входного контроля перед отправкой его на сервер:
| Тип | Описание |
|---|---|
| tel | Входное значение это номер телефона |
| search | Поле ввода это поле поиска |
| url | Входное значение это адрес URL |
| Входное значение это один или более адресов электронной почты | |
| datetime | Входное значение это дата и/или время |
| date | Входное значение это дата |
| month | Входное значение это месяц |
| week | Входное значение это неделя |
| time | Входное значение это тип времени |
| datetime-local | Входное значение это локальные дата/время |
| number | Входное значение это число |
| range | Входное значение это число в данном диапазоне |
| color | Входное значение это цвет в шестнадцатеричном виде, как #FF8800 |
Была ли эта информация полезной?
