HTML5

Новые теги и атрибуты

Семантические теги

Для улучшения семантики html-страниц в HTML5 был введен ряд семантических тегов:

article — единичный отдельный блок контента
aside — блок-контейнер с ддополнительной информацией, чаще всего - сайдбар страницы
figure — обертка для изображения
figcaption — подпись для изображения, используется внутри figure
footer — блок-"подвал" сайта или единичного блока контента
header — блок-"шапка" сайта или единичного блока контента
main — блок основого содержимого страницы
nav — блок навигации по сайту
section — блок связанного контента
time — тег даты и/или времени. Может использоваться с атрибутом datetime
address — тег адреса, в HTML4 означал адрес владельца сайта, в HTML5 может использоваться для указания адреса как владельца сайта, так и автора конкретной статьи
data — тег данных, представляет значения в машинно-читаемом формате: <data value="38">тридцать восемь попугаев</data>
dialog — тег диалога, используется для создания модальных диалоговых окон

Теги отображения

mark

Используется для выделения текста на странице, по аналогии выделения маркером на бумаге.

details

Создает блок дополнительной информации, отображающейся по клику:

<details>Hidden content</details>

При указании атрибута open блок развернут по умолчанию:

<details open>Hidden content</details>

При использовании с тегом summary позволяет поменять кликабельный текст "Details":

Используем summary

<details>
<summary>Используем summary</summary>
Hidden content
</details>

progress

Отображает системный progressbar, используя атрибуты max и value:

<progress value="90" max="100"></progress>

meter

meter служит для отображения количества чего-либо, находящегося в заданном диапазоне. В зависимости от значений дополнительных атрибутов low, high тег meter может окрашиваться в разные цвета:

`<meter value="0.4">40%</meter>`	40%
`<meter value="500" max="750">500</meter>`	500
`<meter value="25" max="100" low="50">60%</meter>`	25
`<meter value="9" max="10" high="8">9</meter>`	9

wbr

wbr позволяет явно указать место разрыва длинных слов при переносе:

Без wbr:Это_очень_очень_длинное_слово_и_без_указания_переносов_браузер_не_будет_знать_как_его_переносить

C wbr:Это_очень_очень_длинное_слово_и_без_указания_переносов_браузер_не_будет_знать_как_его_переносить

Для этих целей можно использовать также спецсимвол , который в месте переноса добавляет дефис. Такой перенос нызвается "мягким".

С :Это_очень_очень_длинное_слово_и_без_указания_переносов_браузер_не_будет_знать_как_его_переносить

Универсальные атрибуты

Универсальные атгрибуты — это атрибуты, которые могут быть добавлены любому элементу. К ним относятся id, class, style. В HTML5 было добавлено еще несколько типов универсальных атрибутов:

hidden — позволяет скрыть любой элемент. В браузере для такого элемента будет установлено css-правило display:none
data-атрибуты — любые атрибуты, начинающиеся с data- являются пользовательскими и служат для добавления дополнительной информации в элемент
contenteditable — выставляется в true|false, отвечает за возможность редактировать содержимое элемента из браузера. Сохраняет форматирование, наследуемый.
spellcheck — выставляется в true|false, указывает необходимость проверки правописания для текстового поля или редактируемого элемента
translate — выставляется в yes|no, указывает на запрет перевода содержимого элемента

Специфические атрибуты

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

async был добавлен для элемента script, при его указании скрипт подгружается на страницу асинхронно, не блокируя отображение содержимого. Может использоваться только для внешних подключаемых скриптов
download был добавлен для элемента a, позволяет указать, что содержимое по ссылке должно скачиваться. Например, обычная ссылка на изображение и ссылка на скачивание изображения.

Атрибуты для input

Для input в HTML5 были добавлены новые атрибуты:

min минимальное значение для поля
max максимальное значение для поля
step шаг изменения для поля
required пометить поле необходимым для заполнения
pattern задать регулярное выражение для поля
placeholder задать текст-подсказку для поля
autofocus передать фокус полю при загрузке страницы
novalidate не валидировать форму перед отправкой (только для форм)

Использование min,max,step накладывает ограничения на ввод с помощью системных кнопок управления, но не на ввод с клавиатуры.

Теги форм

`input[type=number]` позволяет создать поле для ввода целого числа.
`<input type="number" />`	Number:
`<input type="number" value="7" min="5" max="10" />`	Number:
`<input type="number" step="2" />`	Number+step:
Для тега диапазона необходимо указывать значения `min` и `max`. Если они не указаны, то по умолчанию используются 0 и 100 соответственно.
`<input type="range" />`	Range:
`<input type="range" min="30" max="70" step="10" />`	Range:
`<input type="tel" />`	Phone:
`<input type="url" />`	URL:
`<input type="search" />`	Search:
`<input type="email" />`	Email:
`<input type="color" value="#FF0000" />`	Color:
`<input type="color" value="#00FF00" max="#880000" />`	Color+max:
`<input type="time" value="12:00" max="23:30" min="06:00" />`	Time:
`<input type="time" value="12:00" max="23:30:00.00" min="06:00:00.00" step="2" />`	Time+step:
`<input type="week" value="2017-W48" max="2018-W052" min="2017-W01" />`	Week:
`<input type="month" value="2017-12" max="2018-03" min="2017-08" />`	Month:
`<input type="date" value="2017-12-05" max="2018-03-31" min="2017-06-16" />`	Date:
`<input type="datetime-local" />`	Date and time:
Элемент `datalist` работает в паре с текстовым полем и позволяет задать "подстановки" для набираемого текста.
`<input list="lang"> <datalist id="lang"> <option>java</option> <option>javascript</option> <option>html</option> <option>css</option> </datalist>`	Datalist:

Мультимедийные теги: picture

Позволяет разработчикам гибко добавлять изображения на страницу. Основное предназначение - создание адаптивного дизайна.

<picture>

    <source media="(min-width: 1024px)" type="image/jpg" srcset="big_image.jpg, big_image_retina.jpg 2x">

    <source media="(min-width: 600px)" type="image/jpg" srcset="small_image.jpg">

    <img src="fallback_image.jpg" />

</picture>

Содержит вложенные теги source, каждый из которых является источником изображения, прописанном в атрибуте srcset. В атрибуте media указыватся, при выполнении каких media-запросов будет отображен тот или иной источник. Для браузеров, не поддеживающих picture, или для показа изображения, не соответсвующего ни одному указанному media-запросу в конец picture добавляют тег img. Каждый из источников может также содержать информацию о mime-типе type.

Аттрибут srcset вместе с аттрибутом sizes можно использовать и для img:

<img src="small.jpg"

    srcset="img/image_big.png 640w,

        img/image_med.png 480w,

        img/image_small.png 320w"

    sizes="(max-width: 460px) 250px,

        100%"

    alt="Image" />

srcset указывает набор источников и их размеры (ширина в пикселях указывается как w). В sizes указывается размер результирующего изображения в зависимости от медиазапроса. Браузер подбирает источник, наиболее подходящий для вычисленного размера изображения. Примеры.

Мультимедийные теги: video

Изначально кроссбраузерным способом добавления видео было добавление flash-видео. По мере развития HTML появился тег video для вставки видео на страницу (пример):

<video width="640" height="480" controls src="video/video.mp4"></video>

Тег video может использоваться со следующими атрибутами:

controls — отображение элементов управления видео. По умолчанию не отображаются
preload — указывает на предзагрузку видео, по умолчанию "auto", может быть "metadata" или "none"
autoplay — автоматически запускает прогрывание видео
loop — повторяет видео после его окончания
muted — отключает звук
poster — позволяет указать url изображения-заставки

При воспроизведении видео браузер запускает три процесса:

интерпретацию контейнера видео

декодирование видеопотока

декодирование аудиопотока

Главная проблема — разные баузеры поддерживают разные типы видео и нет одного универсального типа, поддерживаемого всеми браузерами.

Форматы видео

Форматы или контейнеры видео - это разный способ представления одного и того же видеофайла. Как обычные файлы можно заархивировать в zip, rar, 7z и т.д., содержимое архива будет одинаковым во всех случаях, на алгоритмы архивации и структура файла-архива - разные.

MPEG-4

Обычно с расширением mp4 или m4v. MPEG-4 основан на старом контейнере Apple QuickTime (файлы с расширением mov).

Ogg

Обычно с расширением ogv. Ogg является открытым стандартом с открытым исходным кодом для пользователей, свободный от каких-либо патентов.

WebM

Расширение webm, более современный формат, предназначен для использования с видеокодеком VP8 и аудиокодеком Vorbis.

Audio Video Interleave

Расширение avi, формат разработан Microsoft, поддерживает малое количество кодеков.

Flash video

Обычно с расширением flv, формат видео Adobe Flash.

Для расшифровки видео используются разные кодеки, поддержка которых неодинакова для разных браузеров - см. поддержка браузерами.

Потому для обеспечения максимальной доступности вашего видео необходимо использовать синтаксис с указанием нескольких источников:

<video width="640" height="480" controls poster="video/poster.jpg">

    <source src="video/video.mp4" type="video/mp4" />

    <source src="video/video.webm" type="video/webm" />

    <source src="video/video.ogv" type="video/ogg" />

    <object width="640" height="480" type="application/x-shockwave-flash" data="video/video.flv">

        <param name="movie" value="video/video.flv" />

        <param name="flashvars" value="controlbar=over&image=video/poster.jpg&file=video/video.mp4" />

        <img src="video/poster.jpg" width="640" height="360" alt="Video" title="No video playback capabilities, please download the video below" />

    </object>

</video>

Использование API работы с видео

Элемент video имеет свойства и методы для управления им с помощью JavaScript:

muted, poster, controls, loop, preload, autoplay — управление одноименными атрибутами видео
volume — геттер/сеттер громкости звука (0-1)
currentTime — геттер/сеттер проигранного времени в секундах
playbackRate — геттер/сеттер скорости проигрывания
buffered — возвращает объект TimeRange, который характеризует буфферизацию видео браузером
paused — геттер состояния видео "на паузе"
ended — геттер состояния видео "закончилось"
duration — геттер длительности видео
canPlayType(type) — проверяет возможность проигрывания того или иного типа видео. В качестве аргумента - mime-type видео, в качестве результата - maybe(возможно поддерживается), probably(поддерживается) или пустая строка
pause() — ставит на паузу проигрывание видео
play() — начинает/возобновляет проигрывание видео

Помимо унаследованных от Element событий тег video имеет специфические собственные события:

loadedmetadata — когда загружены метаданные видео
loadeddata — когда загружен первый кадр видео
load — когда видео загружено
play — когда ничинается/возобновляется проигрывание видео
pause — когда останавливается проигрывание видео
ended — когда заканчивается проигрывание видео
volumechange — когда меняется громкость видео
seeking — при старте перемотки
seeked — при окончании перемотки
timeupdate — при изменении текущего времени видео

Объект видео также может иметь субтитры, подключаемые через тег track:

<video width="640" height="480" controls poster="video/poster.jpg">

    <source src="video/video.mp4" type="video/mp4" />

    <source src="video/video.webm" type="video/webm" />

    <source src="video/video.ogv" type="video/ogg" />

    <track src="video/subs.vtt" kind="subtitles" srclang="en" label="English" />

    <track src="video/subs_ru.vtt" kind="subtitles" srclang="ru" label="Russian" />

</video>

Субтитры формируются в виде файлов в специальном формате, например, vtt а video ссылается на них при подключении.

Мультимедийные теги: audio

Для добавления аудиодорожки на страницу используется тег audio (пример):

<audio src="audio/audio.mp3" controls></audio>

Браузеры, как и в случае с видео, поддерживают разные контейнеры и кодеки аудио, потому кроссбраузерный способ добавления audio включает в себя использование списка источников. Основные форматы аудио для вэб: mp3, wav, aac и ogg.

<audio src="audio/audio.mp3" controls>

    <source src="audio/audio.ogg" type="audio/ogg">

    <source src="audio/audio.mp3" type="audio/mpeg">

    <source src="audio/audio.aac" type="audio/mp4">

    <source src="audio/audio.wav" type="audio/wav">

</audio>

В отличие от video тегу audio нет смысла задавать аттрибуты width,height, но отображаемые размеры можно изменить с помощью css.

Использование API работы с аудио

Элемент audio имеет свойства и методы для управления им с помощью JavaScript:

muted, controls, loop, preload, autoplay — управление одноименными атрибутами аудио
volume — геттер/сеттер громкости звука
currentTime — геттер/сеттер проигранного времени в секундах
playbackRate — геттер/сеттер скорости проигрывания
buffered — возвращает объект TimeRange, который характеризует буфферизацию аудио браузером
paused — геттер состояния аудио "на паузе"
ended — геттер состояния аудио "закончилось"
duration — геттер длительности аудио
canPlayType(type) — проверяет возможность проигрывания того или иного типа аудио. В качестве аргумента - mime-type аудио, в качестве результата - maybe(возможно поддерживается), probably(поддерживается) или пустая строка
pause() — ставит на паузу проигрывание аудио
play() — начинает/возобновляет проигрывание аудио

Помимо унаследованных от Element событий тег audio имеет специфические собственные события:

loadedmetadata — когда загружены метаданные аудио
loadeddata — когда загружен первый кадр аудио
load — когда аудио загружено
play — когда ничинается/возобновляется проигрывание аудио
pause — когда останавливается проигрывание аудио
ended — когда заканчивается проигрывание аудио
volumechange — когда меняется громкость аудио
seeking — при старте перемотки
seeked — при окончании перемотки
timeupdate — при изменении текущего времени аудио

Мультимедийные теги: canvas

canvas представляет собой холст для рисования на нем с помощью JavaScript. Подобно десктопным графическим редакторам позволяет рисовать примитивные геометрические фигуры, встраивать изображения и выводить текст.

Прочие теги: menu

Тег menu, используемый вместе с menuitem, созволяет создавать свои собственные меню. Такое меню в дальнейшем можно привязать в качестве контекстного, если использовать для элемента атрибут contextmenu:

<div contextmenu="just-menu">Text container</div>

<menu id="just-menu" type="context">

    <menuitem label="Alert()" onclick="alert('Alert!');"></menuitem>

    <menuitem label="Refresh" icon="img/refresh.png" onclick="location.reload();"></menuitem>

</menu>

Text container

В атрибуте label каждого элемента меню указывается название данного пункта, а с помощью необязательного атрибута icon можно указать путь к изображению, которое будет отображаться рядом с пунктом меню. Пункт с пустым label отображаться не будет.

Прочие теги: template

Изначально понятие шаблона было характерно для server-side программирования. По мере того, как HTML-страницы из простых статических сайтов стали превращаться в мощные вэб-приложения, возникла необходимость создания шаблонов на клиентской стороне. Для этого в HTML5 был добавлен специальный тег template. Внутрь тега помещают требующий повторения код и специального вида конструкции для вставки данных (пример). Таким образом, содержимое тега template не отображается на странице, но с помощью JavaScript оно может многократно копироваться и вставляться на страницу с нужными данными.

`<input type="text" value="Required" required />`	Required*:
`<input type="text" pattern="\d{3}(-\d{2}){2}" placeholder="Your phone number" />`	Pattern (ddd-dd-dd):