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

Курс по основам HTML5. W3Schools на русском языке. Уроки для начинающих

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

Ниже приведён список новых HTML5 элементов и описание того, для чего они используются.

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

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

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

Читать больше про HTML5 Семантика.

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

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

Прочитайте всё о старых и новых элементах формы в разделе HTML Элементы формы.

Новые типы ввода

Новые типы ввода Новые атрибуты ввода
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

Узнайте о старых и новых типах ввода данных в разделе HTML Типы ввода.

Узнайте всё об атрибутах ввода в разделе HTML Атрибуты ввода.

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

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> Нарисуйте масштабированную векторную графику

Читать больше про HTML5 Canvas.

Читать больше про HTML5 SVG.

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

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

Читать больше про HTML5 Video.

Читать больше про HTML5 Audio.