Пятиминутный обзор всех новых элементов HTML5

HTML5 ввел много новых элементов HTML-разметки. В этой статье мы рассмотри все новые элементы разметки в HTML5.

• Article – это новый секционный элемент, который определяет любую независимую запись (статью) на сайте (или, например, это может быть резюме, описание товара в интернет магазине и так далее).
• Aside – элемент aside определяет контент, который расположен вокруг основного контента. Это может быть боковая панель (sidebar), содержащая ряд ссылок на статьи, на архив, на
метки.
• Audio – это новый элемент, благодаря которому можно встраивать аудио непосредственно в веб-страницу.
• Canvas - это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript.
• Command – элемент command представляет команду, которая может вызываться пользователем. Обычно элемент command располагается внутри элемента menu.
• Datalist – элемент datalist позволяет создать массив, связанный с элементом input (посредством атрибута id) или, другими словами, элемент datalist создает список вариантов, которые можно выбирать при наборе в текстовом поле (input type='text'). Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.
• details – элемент details используется для представления области, куда пользователь может обратиться за дополнительной информацией. Этот элемент позволят показывать и прятать контент с помощью одного клика мышки.
• Embed – элемент embed используется для вставки в HTML-документ не HTML-приложений или интерактивного содержимого.
• Summary – элемент summary используется для отображения заголовка тега details, именно по клику на теге summary происходит раскрытие/закрытие содержимого тега details.
• Figure – элемент figure используется для группировки содержимого, например, для изображения и надписи к нему.
• Figcaption – элемент figcaption является заголовком для элемента figure.
• Footer – используется для представления нижней части страницы. Этот секционный элемент обычно содержит подпись автора статьи, дату, авторское право, контактная информация и т.д.
• Header - тег header определяет верхний колонтитул сайта (шапку сайта); обычно это заголовок (что спорно).
• Keygen – Используется для генерации пары ключей — закрытого и открытого. Когда форма отправляется на сервер, закрытый (private) ключ сохраняется на локальном компьютере, а открытый (public) ключ передается на сервер вместе с формой. Сами ключи необходимы для шифрования и расшифровки данных, создания и проверки цифровой подписи. Элемент keygen является элементом формы.
• Mark - Если нам требуется сделать смысловой акцент на тексте, не прибегая к его визуальному выделению, можно воспользоваться тегом mark, но обычно, например, в браузерах Chrome и Firefox фоновый цвет текста внутри тега mark выделяется желтым цветом.
• meter - Используется для определения числового значения из определенного интервала.
• Nav – элемент nav определяет навигационную область, обычно это список ссылок. Ссылки, как правило, ведут на другие страницы сайта.
• Output – используется для вывода результата каких-либо вычислений (обычно это результат работы JavaScript-сценария или AJAX-запроса) или пользовательских действий.
• Progress – элемент progress показывает степень завершенности текущего прогресса. Использовать можно для отслеживания индикации, например, загрузки файла, изображения и т.д.
• Ruby – тег ruby задает аннотацию (краткая характеристика издания) к расположенному выше или нижу тексту.
• Rt – элемент rt является ‛ребенком“ по отношению к тегу ruby; именно в теге rt заключается аннотация к тексту.
• Rp – элемент rp используется для вывода текста в браузерах, которые не поддерживают тег ruby.
• Section – элемент section группирует контент по тематике, или, другими словами, определяет раздел документа. Если вы хотите сгруппировать общие по смыслу элементу воспользуйтесь тегом section.
• Source – элемент source используется, чтобы указать на медиа-ресурс у медиа-элементов (video, audio).
• Time – тег time используется для вывода информации о дате или времени.
• Video – элемент video добавляет, воспроизводит и управляет настройками видеоролика на веб-странице.
• wbr - элемент wbr указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.

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