Открыть меню    

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

новые теги 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, надеюсь, данная информация оказалась вам полезной. В следующих статьях мы вернемся к некоторым из вышеприведенных элементов и рассмотрим их более подробно. Если у вас возникли вопросы или замечание по тексту оставляйте комментарии.

Комментарии к статье