1.11.7. Встраиваемое содержимое
Встраиваемое содержимое делает страницы интерактивными и мультимедийными.
Вы можете встраивать видео, аудио, pdf-документы и т.п. как из внутренних, так и внешних источников — приложений или сайтов.
HTML-элементы для встраивания ресурсов в документ
- Содержание:
- 1. Элемент <picture>
- 2. Элемент <source>
- 3. Элемент <img>
- 4. Элемент <iframe>
- 5. Элемент <embed>
- 6. Элемент <object>
- 7. Элемент <param>
- 8. Элемент <video>
- 9. Элемент <audio>
- 10. Элемент <track>
- 11. Элемент <map>
- 12. Элемент <area>
1. Элемент <picture>
Категории контента: потоковое содержимое, текстовое содержимое, встраиваемое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается встраиваемое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты.
Элемент <picture> вместе с элементом <source> может использоваться для предоставления множественных источников изображения. Это дает браузеру возможность выбора оптимальной версии изображения, в зависимости от плотности пикселей экрана, размера области просмотра, формата изображения и других факторов. Если наиболее подходящей версии изображения среди элементов <source> найдено не будет, то будет отображен файл, указанный в резервном элементе <img>.
<picture>
<source media="(min-width: 800px)"
sizes="80vw"
srcset="lighthouse-landscape-640.jpg 640w,
lighthouse-landscape-1280.jpg 1280w,
lighthouse-landscape-2560.jpg 2560w">
<img src="lighthouse-160.jpg" alt="lighthouse">
</picture>2. Элемент <source>
Категории контента: отсутствуют.
Контекст, в котором этот элемент может быть использован: как дочерний элемент элемента <picture>, перед элементом <img>. Как дочерний элемент <audio> или <video>, перед любым потоковым содержимым или элементом <track>.
Пропуск тегов: отсутствует закрывающий тег.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
| Атрибут | Описание, принимаемое значение |
|---|---|
| media | Список медиа-запросов.
Синтаксис: media="(min-width: 768px)" |
| src | Задает URL-адрес медиа-ресурса для элементов <audio> и <video>.
Синтаксис: src="medium-car-image.jpg" |
| srcset | Создает список изображений для использования в различных ситуациях (например, дисплеи с высоким разрешением, небольшие мониторы и т.д.). Значением атрибута является одна или несколько строк URL-адресов, разделенных запятой или URL-адреса с дескрипторами ширины или дескриптором плотности пикселей, которые подсказывают браузеру изображение какой ширины находится по данному адресу.
Синтаксис: srcset="port-small.jpg 700w, port-medium.jpg 1200w, port-large.jpg 1600w" srcset="image.png 2x" Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибуте srcset. Повторение дескрипторов (например, два источника в одном srcset с одинаковым дескриптором 2x) тоже является недопустимым. |
| sizes | Задает ширину изображения между переломными точками дизайна при заданном атрибуте srcset. Значением атрибута является условие медиа-запроса (должно быть пропущено для последнего элемента) и значение размера источника. Если для ширины не задан медиа-запрос, то это будет значение по умолчанию.
Синтаксис: sizes="80vw" sizes="(min-width: 768px) 700px" sizes="(min-width: 768px) 600px, (min-width: 1240px) 80vw, 100vw" |
| type | Задает MIME-тип встраиваемого ресурса. Если браузер не поддерживает данный тип, он переходит к следующему элементу <source>. Параметр codecs, который определяет MIME-типы для элементов <audio> или <vidio>, может потребоваться, чтобы точно указать, как кодируется ресурс.
Синтаксис: type="image/svg+xml" type='video/ogg; codecs="theora, vorbis"' |
Элемент <source> позволяет указывать несколько альтернативных источников изображений для элемента <img> или несколько альтернативных медиа-ресурсов для элементов <audio> или <vidio>. Сам по себе он ничего не представляет.
Если родительским элементом является <picture>: атрибут srcset является обязательным, атрибуты media и type могут присутствовать.
Если родительским элементом является <audio> или <vidio>: атрибут src является обязательным, атрибут type может присутствовать. Атрибуты srcset, sizes и media не должны присутствовать.
<source srcset="small-car-image.jpg 400w,
medium-car-image.jpg 800w,
large-car-image.jpg 1200w"
sizes="(min-width: 1280px) 1200px,
(min-width: 768px) 400px,
100vw">3. Элемент <img>
Категории контента: потоковое содержимое; текстовое содержимое; встраиваемое содержимое; элемент, связанный с формой; если элемент имеет атрибут usemap — интерактивное содержимое; видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается встраиваемое содержимое.
Пропуск тегов: отсутствует закрывающий тег.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
| Атрибут | Описание, принимаемое значение |
|---|---|
| alt | Добавляет описание изображения, которое выводится на месте появления изображения до его загрузки или при отключенной графике. С точки зрения SEO не должно дублировать название файла и должно быть составлено таким образом, чтобы органично вписаться в контекст.
Синтаксис: alt="описание изображения" |
| crossorigin | Позволяет загружать изображения в <canvas> с ресурсов другого домена с помощью CORS-запросов. Изображения, загруженные с помощью CORS-запросов, могут быть использованы повторно.
Разрешенные значения: use-credentials — запрос выполняется с передачей учетных данных. Синтаксис: crossorigin="anonymous". |
| decoding | Является подсказкой для браузеров, декодировать изображение параллельно или вместе с остальным содержимым страницы. Изображение сначала загружается с сервера; затем данные изображения считываются (декодируются); используя декодированные данные, изображение отображается на странице. Декодирование больших изображений может блокировать основной поток на сотни миллисекунд и более, прерывая плавную анимацию и взаимодействие с пользователем.
Разрешенные значения: async — отрисовка страницы и декодирование изображения выполняются параллельно. auto — значение по умолчанию, означает отсутствие предпочтений по декодированию. Синтаксис: decoding="async" |
| height | Задает высоту изображения в px.
Синтаксис: height="300" |
| ismap | Указывает на то, что картинка является изображением с интерактивными областями. При нажатии на изображение-карту координаты передаются на сервер в виде строки запроса URL-адреса. Атрибут ismap допускается только в случае, если элемент <img> является потомком элемента <a> с действительным атрибутом href.
Синтаксис: ismap. |
| loading | Указывает политику загрузки изображений, находящихся за пределами области просмотра.
Разрешенные значения: lazy — откладывает загрузку изображения до того момента, пока оно не появится в области просмотра. Рекомендуется указывать размеры изображений с помощью атрибутов ширины и высоты, даже если они явно заданы в CSS, чтобы предотвратить смещение макета страницы после загрузки изображения. Рекомендуется добавлять изображениям, которые находятся ниже первого экрана. Синтаксис: loading="lazy" |
| referrerpolicy | Устанавливает политику HTTP-заголовка — количество информации об исходной странице, с которой осуществлен переход на целевую страницу.
Разрешенные значения: no-referrer-when-downgrade — Referer указывается при выполнении запроса между HTTPS. same-origin — Referer указывается при выполнении запроса в пределах одного источника. origin — указывается только источник запроса (например, Referer документа https://example.com/page.html будет https://example.com/). strict-origin — при выполнении запроса между HTTPS и HTTPS указывается только источник запроса. origin-when-cross-origin — при выполнении запроса в пределах одного источника указывается полный URL, иначе указывается только источник. strict-origin-when-cross-origin — политика по умолчанию, отправляет полный URL-адрес при выполнении запроса в пределах одного источника, отправляет только источник при запросе между HTTPS и HTTPS и не отправляет заголовок между HTTPS и HTTP. unsafe-url — всегда указывается полный URL. Синтаксис: referrerpolicy="origin" |
| src | Задает URL-адрес изображения.
Синтаксис: src="medium-car-image.jpg" |
| srcset | Создает список изображений для использования в различных ситуациях (например, дисплеи с высоким разрешением, небольшие мониторы и т.д.). Значением атрибута является одна или несколько строк URL-адресов, разделенных запятой или URL-адреса с дескрипторами ширины или дескриптором плотности пикселей, которые подсказывают браузеру изображение какой ширины находится по данному адресу.
Синтаксис: srcset="port-small.jpg 700w, port-medium.jpg 1200w, port-large.jpg 1600w" srcset="image.png 2x" Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибуте srcset. Повторение дескрипторов (например, два источника в одном srcset с одинаковым дескриптором 2x) тоже является недопустимым. |
| sizes | Задает ширину изображения между переломными точками дизайна при заданном атрибуте srcset. Значением атрибута является одна или несколько строк, содержащих условие медиа-запроса (должно быть пропущено для последнего элемента) и значения размера источника. Если для ширины не задан медиа-запрос, то это будет значение по умолчанию.
Синтаксис: sizes="80vw" sizes="(min-width: 768px) 700px" sizes="(min-width: 768px) 600px, (min-width: 1240px) 80vw, 100vw" |
| usemap | Значение ассоциируется со значением атрибута name или id элемента <map> и создает связь между элементами <img> и <map>. Значение обязательно должно начинаться с символа #. Атрибут нельзя использовать, если элемент <map> является потомком элемента <a> или <button>.
Синтаксис: usemap="#mymap" |
| width | Задает ширину изображения в px.
Синтаксис: width="500" |
Элемент <img> представляет изображение и его резервное содержимое. Атрибут src должен присутствовать, а атрибут srcset является необязательным. Если присутствует атрибут srcset, атрибут sizes также может присутствовать.
<img src="/uploads/100-marie-lloyd.jpg"
srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
alt="A singer on the stage" width="100" height="150">4. Элемент <iframe>
Категории контента: потоковое содержимое, текстовое содержимое, встраиваемое содержимое, интерактивное содержимое, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается встраиваемое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
| Атрибут | Описание, принимаемое значение |
|---|---|
| src | Задает URL-адрес встраиваемого ресурса.
Синтаксис: src="https://youtu.be/XxeQX_QZHzc" |
| srcdoc | Задает HTML-содержимое фрейма, переопределив атрибут src. Если браузер не поддерживает атрибут srcdoc, он вернется к URL-адресу в атрибуте src.
Синтаксис: srcdoc="<p>did you get a cover picture yet?</p>" |
| name | Задает имя фрейма, которое можно использовать в атрибуте href элементов <a>, <form> или <base>; в атрибуте formtarget элементов <input> или <button>; или параметре windowName метода window.open().
Синтаксис: name="frame-name" |
| sandbox | Устанавливает дополнительные ограничения для любого содержимого, размещенного в <iframe>.
Разрешенные значения: allow-modals — разрешает ресурсу открывать модальные окна (например, с помощью alert). allow-orientation-lock — разрешает ресурсу блокировать ориентацию экрана. allow-pointer-lock — разрешает ресурсу блокировать курсор мыши. allow-popups — разрешает всплывающие окна (например, window.open(), target="_ blank" или showModalDialog()). Если это ключевое слово не используется, всплывающее окно не откроется. allow-popups-to-escape-sandbox — разрешает всплывающим окнам не наследовать режим песочницы (например, чтобы в всплывающем окне, в котором есть JavaScript, он был разрешен без allow-scripts у фрейма). allow-presentation — позволяет ресурсу запускать презентации. allow-same-origin — разрешает загрузку содержимого фрейма (воспринимает это как контент из того же источника, что и родительский документ). Блокирует всплывающие окна, поэтому может использоваться для безопасного открытия контента. allow-scripts — разрешает ресурсу запускать сценарии (но не создавать всплывающие окна). allow-top-navigation — разрешает открывать ссылку фрейма в родительском документе. allow-top-navigation-by-user-activation — разрешает открывать ссылку фрейма, нажатую пользователем, в родительском документе. allow-downloads — позволяет выполнять загрузки жестом пользователя. Синтаксис: sandbox="allow-forms allow-modals" |
| allow | Задает политику функций, которые доступны для <iframe> в зависимости от источника запроса (например, доступ к микрофону, камере, батарее, API общего доступа и т.д.).
Разрешенные значения: ambient-light-sensor — определяет, разрешено ли текущему документу собирать информацию о количестве света в окружающей среде вокруг устройства через интерфейс AmbientLightSensor. autoplay — определяет, разрешено ли текущему документу автоматически воспроизводить <audio> и <video>. battery — определяет, разрешено ли использование API состояния батареи. camera — разрешает доступ к камере. fullscreen — определяет, разрешено ли фрейму воспроизводиться в полноэкранном режиме. geolocation — определяет, разрешено ли текущему документу использовать интерфейс геолокации. microphone — определяет, разрешено ли текущему документу использовать устройства ввода звука. payment — определяет, разрешено ли текущему документу использовать API запроса оплаты. Полный список значений. Синтаксис: allow="geolocation https://google-developers.appspot.com" allow="fullscreen 'src'" |
| width | Задает ширину фрейма в px.
Синтаксис: width="500" |
| height | Задает высоту фрейма в px.
Синтаксис: height="300" |
| referrerpolicy | Устанавливает политику HTTP-заголовка — количество информации об исходной странице, с которой осуществлен переход на целевую страницу.
Разрешенные значения: no-referrer-when-downgrade — Referer указывается при выполнении запроса между HTTPS и HTTPS. same-origin — Referer указывается при выполнении запроса в пределах одного источника. origin — указывается только источник запроса (например, Referer документа https://example.com/page.html будет https://example.com/). strict-origin — при выполнении запроса между HTTPS и HTTPS указывается только источник запроса. origin-when-cross-origin — при выполнении запроса в пределах одного источника указывается полный URL, иначе указывается только источник. strict-origin-when-cross-origin — политика по умолчанию, отправляет полный URL-адрес при выполнении запроса в пределах одного источника, отправляет только источник при запросе между HTTPS и HTTPS и не отправляет заголовок между HTTPS и HTTP. unsafe-url — всегда указывается полный URL. Синтаксис: referrerpolicy="origin" |
| loading | Указывает политику загрузки изображений, находящихся за пределами области просмотра.
Разрешенные значения: lazy — откладывает загрузку изображения до того момента, пока оно не появится в области просмотра. Рекомендуется указывать размеры изображений с помощью атрибутов ширины и высоты, даже если они явно заданы в CSS, чтобы предотвратить смещение макета страницы после загрузки изображения. Рекомендуется добавлять изображениям, которые находятся ниже первого экрана. Синтаксис: loading="lazy" |
Элемент <iframe> используется для встраивания другого HTML-документа в текущий, при этом он полностью изолирован от JavaScript и CSS родительского элемента.
Стили браузера по умолчанию:
display: inline;
border: 2px inset rgb(238,238,238);
width: 300px;
height: 150px;<iframe sandbox="allow-forms allow-modals"
allow="fullscreen"
src="https://youtu.be/">
</iframe>5. Элемент <embed>
Категории контента: потоковое содержимое, текстовое содержимое, встраиваемое содержимое, интерактивное содержимое, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается встраиваемое содержимое.
Пропуск тегов: отсутствует закрывающий тег.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
| Атрибут | Описание, принимаемое значение |
|---|---|
| src | Задает URL-адрес встраиваемого ресурса.
Синтаксис: src="catgame.swf" |
| type | Задает MIME-тип подключаемого модуля.
Синтаксис: type="video/webm" |
| width | Задает ширину встраиваемого ресурса в px.
Синтаксис: width="500" |
| height | Задает высоту встраиваемого ресурса в px.
Синтаксис: height="300" |
Стили браузера по умолчанию:
display: inline;
width: 300px;
height: 150px;Элемент <embed> используется для отображения внешних ресурсов или интерактивного контента. Элемент <embed> не подключает альтернативные ресурсы. Если браузер не находит подходящий плагин при попытке найти и создать экземпляр ресурса, то он выдаст сообщение о неподдерживаемом формате.
<embed src="catgame.swf">6. Элемент <object>
Категории контента: потоковое содержимое, текстовое содержимое, встраиваемое содержимое, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается встраиваемое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
| Атрибут | Описание, принимаемое значение |
|---|---|
| data | Задает URL-адрес встраиваемого ресурса.
Синтаксис: data="logo.svg" |
| type | Задает MIME-тип встраиваемого ресурса.
Синтаксис: type="application/x-java-applet" |
| typemustmatch | Логический атрибут, наличие которого означает, что ресурс, заданный атрибутом data, должен использоваться только в том случае, если значение атрибута type и MIME-тип вышеупомянутого ресурса совпадают. Атрибут typemustmatch указывают, если атрибуты data и type присутствуют.
Синтаксис: typemustmatch |
| name | Задает имя встраиваемого ресурса.
Синтаксис: name="pdf-doc" |
| form | Определяет форму, с которой связан. Значение атрибута должно быть идентификатором элемента <form> в том же документе. Несмотря на то, что объект связан с формой, он не включается в отправку формы.
Синтаксис: form="form-id" |
| width | Задает ширину встраиваемого ресурса в px.
Синтаксис: width="500" |
| height | Задает высоту встраиваемого ресурса в px.
Синтаксис: height="300" |
Элемент <object> представляет внешний ресурс, который, в зависимости от типа ресурса, будет рассматриваться либо как изображение, либо как вложенный контекст просмотра, либо как внешний ресурс, который будет обрабатываться плагином.
<object type="application/x-shockwave-flash">
<param name="movie" value="https://video.example.com/library/watch.swf">
<param name="allowfullscreen" value="true">
<param name="flashvars" value="https://video.example.com/vids/123456">
<video controls src="https://video.example.com/vids/123456"
<a href="https://video.example.com/vids/123456">View video</a>
</video>
</object>7. Элемент <param>
Категории контента: отсутствуют.
Контекст, в котором этот элемент может быть использован: как дочерний элемент элемента <object>, перед любым потоковым содержимым.
Пропуск тегов: отсутствует закрывающий тег.
Для элемента доступны глобальные атрибуты, а также атрибуты name — имя параметра, и value — значение параметра. Оба атрибута должны присутствовать.
Элемент <param> определяет параметры плагинов, вызываемых элементом <object>. Сам по себе он ничего не представляет.
<object type="application/vnd.o3d.auto">
<param name="o3d_features" value="FloatingPointTextures">
<img src="o3d-teapot.png"
title="3D Utah Teapot illustration rendered using O3D."
alt="When O3D renders the Utah Teapot, it appears as a squat
teapot with a shiny metallic finish on which the
surroundings are reflected, with a faint shadow caused by
the lighting.">
<p>To see the teapot actually rendered by O3D on your computer, please download and install the
<a href="https://example.com/o3d/install">O3D plugin</a>.</p>
</object>
<script src="o3d-teapot.js"></script>8. Элемент <video>
Категории контента: потоковое содержимое; текстовое содержимое; встраиваемое содержимое; видимое содержимое; если присутствует атрибут controls — интерактивное содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается встраиваемое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
| Атрибут | Описание, принимаемое значение |
|---|---|
| src | Задает URL-адрес медиафайла. Необязательный атрибут, вместо этого можно использовать элемент <source> внутри <video>.
Синтаксис: src="video.mp4" |
| crossorigin | Позволяет загружать видео в <canvas> с ресурсов другого домена с помощью CORS-запросов. Видеофайлы, загруженные с помощью CORS-запросов, могут быть использованы повторно.
Разрешенные значения: use-credentials — запрос выполняется с передачей учетных данных. Синтаксис: crossorigin="anonymous" |
| playsinline | Логический атрибут, указывающий, что видео должно воспроизводиться в области воспроизведения элемента, а не в полноэкранном режиме (для Andrоid и iOS-устройств).
Синтаксис: playsinline |
| poster | Задает URL-адрес изображения, которое будет показываться перед воспроизведением видео.
Синтаксис: poster="poster.jpg" |
| preload | Подсказывает браузеру, какой контент загрузить перед воспроизведением видео для улучшения взаимодействия с пользователем. Значение по умолчанию отличается для каждого браузера.
Разрешенные значения: metadata — указывает, что выбираются только метаданные видео (например, продолжительность). auto — указывает, что можно загрузить весь видеофайл, даже если пользователь не собирается его воспроизводить. Синтаксис: preload="metadata" |
| autoplay | Логический атрибут, указывает на то, что видеофайл может запускаться автоматически при загрузке страницы.
Синтаксис: autoplay |
| loop | Логический атрибут, указывает, что видео следует зацикливать.
Синтаксис: loop |
| muted | Логический атрибут, указывает, что звук видео должен быть отключен по умолчанию.
Синтаксис: muted |
| controls | Отображает элементы управления, позволяющие пользователю управлять воспроизведением видео, включая громкость, поиск и приостановку/возобновление воспроизведения.
Синтаксис: controls |
| width | Задает ширину области отображения видео в px.
Синтаксис: width="500" |
| height | Задает высоту области отображения видео в px.
Синтаксис: height="300" |
Элемент <video> используется для воспроизведения видео или фильмов, а также аудиофайлов с субтитрами. Внутри <video> может быть предоставлено содержимое. Браузеры не должны показывать это содержимое пользователю, оно предназначено для старых веб-браузеров, которые не поддерживают видео.
<video controls preload="metadata" poster="example.png">
<source type="video/webm" src="example.webm">
<source type="video/mp4" src="example.mp4">
<a href="example.webm" download>Download the video file.</a>
</video>9. Элемент <audio>
Категории контента: потоковое содержимое; текстовое содержимое; встраиваемое содержимое; если присутствует атрибут controls — интерактивное содержимое; видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается встраиваемое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
| Атрибут | Описание, принимаемое значение |
|---|---|
| src | Задает URL-адрес медиафайла. Необязательный атрибут, вместо этого можно использовать элемент <source> внутри <audio>.
Синтаксис: src="video.mp4" |
| crossorigin | Позволяет загружать аудио в <canvas> с ресурсов другого домена с помощью CORS-запросов. Аудиофайлы, загруженные с помощью CORS-запросов, могут быть использованы повторно.
Разрешенные значения: use-credentials — запрос выполняется с передачей учетных данных. Синтаксис: crossorigin="anonymous" |
| preload | Подсказывает браузеру, какой контент загрузить перед воспроизведением аудио для улучшения взаимодействия с пользователем. Значение по умолчанию отличается для каждого браузера.
Разрешенные значения: metadata — указывает, что выбираются только метаданные аудио (например, продолжительность). auto — указывает, что можно загрузить весь аудиофайл, даже если пользователь не собирается его воспроизводить. Синтаксис: preload="metadata" |
| autoplay | Логический атрибут, указывает на то, что аудио может запускаться автоматически при загрузке страницы.
Синтаксис: autoplay |
| loop | Логический атрибут, указывает, что аудио следует зацикливать.
Синтаксис: loop |
| muted | Логический атрибут, указывает, что звук аудио должен быть отключен по умолчанию.
Синтаксис: muted |
| controls | Отображает элементы управления, позволяющие пользователю управлять воспроизведением звука, включая громкость, поиск и приостановку/возобновление воспроизведения.
Синтаксис: controls |
Элемент <audio> представляет собой звук или аудиопоток. Внутри <audio> может быть предоставлено содержимое. Браузеры не должны показывать это содержимое пользователю, оно предназначен для старых веб-браузеров, которые не поддерживают звук, так что можно попробовать устаревшие звуковые плагины или показать пользователям текст, информирующий их о том, как получить доступ к звуковому содержимому.
<audio controls autoplay loop>
<source src="music.ogg" type="audio/ogg; codecs=vorbis">
<source src="music.mp3" type="audio/mpeg">
</audio>10. Элемент <track>
Категории контента: отсутствуют.
Контекст, в котором этот элемент может быть использован: как дочерний элемент элементов <video> и <audio> перед любым потоковым содержимым.
Пропуск тегов: отсутствует закрывающий тег.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
| Атрибут | Описание, принимаемое значение |
|---|---|
| kind | Указывает, какой тип текстовой дорожки должен быть использован.
Разрешенные значения: captions — показывает транскрипцию или перевод диалога, звуковых эффектов, соответствующих музыкальных сигналов и другой соответствующей звуковой информации, накладывается на видео; помечен как подходящий для слабослышащих. descriptions — выводит текстовое описание, которое синтезируется как аудио, подходит для слепых пользователей. chapters — выводит заголовки, предназначенные для навигации по медиаресурсу. Отображается как интерактивный (потенциально вложенный) список в интерфейсе браузера. metadata — выводит данные, предназначенные для использования скриптами. Не отображаются для пользователей. Синтаксис: kind="chapters" |
| src | Задает URL-адрес трека (файла с расширением .vtt).
Синтаксис: src="sampleCaptions.vtt" |
| srclang | Указывает язык текстовой дорожки. Если для атрибута kind установлено значение subtitles, этот атрибут должен быть определён.
Синтаксис: srclang="en" |
| label | Указывает заголовок текстовой дорожки, который используется браузером при выводе списка доступных текстовых дорожек.
Синтаксис: label="Key Stage 3" |
| default | Указывает, что данная звуковая дорожка является наиболее подходящей.
Синтаксис: default |
Элемент <track> позволяет явно указывать внешние текстовые ресурсы для медиа-элементов. Сам по себе он ничего не представляет.
<video src="brave.webm">
<track kind=subtitles src=brave.en.vtt srclang=en label="English">
<track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
<track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
<track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
</video>11. Элемент <map>
Категории контента: потоковое содержимое, текстовое содержимое, встраиваемое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается встраиваемое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны глобальные атрибуты, а также атрибут name, задающий имя изображения-карты для ссылки из атрибута usemap.
Элемент <map> в сочетании с элементом <img> и любыми потомками элемента <area> определяет изображение-карту. Элемент представляет свои дочерние элементы.
<header>
<h1>Shop</h1>
<img src="/images/menu.png" alt="Shop navigation menu. Select a department to go to its page." usemap="#nav">
</header>
...
<footer>
<map name="nav">
<p>
<a href="/clothes/">Clothes</a>
<area alt="Clothes" coords="0,0,100,50" href="/clothes/">
<a href="/toys/">Toys</a>
<area alt="Toys" coords="100,0,200,50" href="/toys/">
<a href="/food/">Food</a>
<area alt="Food" coords="200,0,300,50" href="/food/">
<a href="/books/">Books</a>
<area alt="Books" coords="300,0,400,50" href="/books/">
</p>
</map>
</footer>12. Элемент <area>
Категории контента: потоковое содержимое, текстовое содержимое.
Контекст, в котором этот элемент может быть использован: там, где ожидается текстовое содержимое, но только как предок элемента <map> или <template>.
Пропуск тегов: отсутствует закрывающий тег.
Для элемента доступны глобальные атрибуты, а также атрибуты, приведенные в таблице:
| Атрибут | Описание, принимаемое значение |
|---|---|
| alt | Задает альтернативный текст для изображения-карты, когда изображения недоступны. Значением должен быть текст, информирующий пользователя о назначении ссылки.
Синтаксис: alt="Clothes" |
| coords | Задает координаты формы, описываемой атрибутом shape. Координаты задаются с помощью целых чисел и разделяются запятыми: для круга — три целых числа, последнее из которых должно быть неотрицательным. Первое число — расстояние в пикселях от левого края изображения до центра круга, второе число — расстояние в пикселях от верхнего края изображения до центра круга, третье число — радиус круга в пикселях; для прямоугольника — четыре числа, первое из которых должно быть меньше третьего, а второе — меньше четвертого. Четыре точки должны представлять, соответственно, расстояние от левого края изображения до левой стороны прямоугольника, расстояние от верхнего края до верхней стороны, расстояние от левого края до правой стороны и расстояние от верхнего края до нижнего, все в пикселях; для многоугольника — минимум шесть чисел, и количество должно быть четным. Каждая пара целых чисел должна представлять координату, заданную как расстояние от левого и верхнего края изображения в пикселях соответственно, и все координаты вместе должны представлять точки многоугольника по порядку. Также рекомендуется указывать последние координаты, равные первым, для логического завершения фигуры. Синтаксис: coords="300,0,400,50" |
| download | Позволяет загружать ресурс вместо перехода к нему.
Синтаксис: download |
| href | Указывает URL-адрес для ссылки. Может быть указан абсолютный или относительный адрес.
Синтаксис: href="/clothes/" |
| hreflang | Определяет язык связанного веб-документа. Используется только если задан атрибут href. Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка.
Синтаксис: hreflang="ru" |
| ping | Задает URL-адреса ресурсов, которые получат уведомления, если пользователь перейдет по гиперссылке.
Синтаксис: ping="https://site_url.ru" |
| rel | Устанавливает связь текущего документа (или подраздела/темы) с целевым ресурсом. Может содержать более одного значения.
Разрешенные значения: author — ссылка на автора документа. bookmark — постоянный URL-адрес, используемый для закладок. help — ссылка на справку. license — ссылка на информацию об авторских правах на данный веб-документ. next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности. nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке. noopener — указывает браузеру перейти к целевому ресурсу без предоставления новому контексту просмотра доступа к документу, который его открыл. Это особенно полезно при открытии ненадежных ссылок, чтобы гарантировать, что они не могут вмешаться в исходный документ через свойство Window.opener. noreferrer — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта. prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш. search — указывает, что целевой документ содержит инструмент для поиска. tag — указывает ключевое слово для текущего документа. Синтаксис: rel="alternate" |
| shape | Определяет форму области, создаваемой на изображении-карте.
Разрешенные значения: circle — активная область в форме круга. poly — активная область в форме многоугольника. default — активная область занимает всю площадь изображения. Синтаксис: shape="circle" |
| target | Указывает, куда будет загружен документ при переходе по ссылке.
Разрешенные значения: _blank — страница открывается в новом окне браузера. _parent — страница загружается во фрейм-родитель. _top — страница загружается в полное окно браузера. Синтаксис: target="_blank" |
| type | указывает MIME-тип связанного ресурса. Носит чисто рекомендательный характер.
Синтаксис: type="text/xml" |
| referrerpolicy | Устанавливает политику HTTP-заголовка — количество информации об исходной странице, с которой осуществлен переход на целевую страницу.
Разрешенные значения: no-referrer-when-downgrade — Referer указывается при выполнении запроса между HTTPS. same-origin — Referer указывается при выполнении запроса в пределах одного источника. origin — указывается только источник запроса (например, Referer документа https://example.com/page.html будет https://example.com/). strict-origin — при выполнении запроса между HTTPS и HTTPS указывается только источник запроса. origin-when-cross-origin — при выполнении запроса в пределах одного источника указывается полный URL, иначе указывается только источник. strict-origin-when-cross-origin — политика по умолчанию, отправляет полный URL-адрес при выполнении запроса в пределах одного источника, отправляет только источник при запросе между HTTPS и HTTPS и не отправляет заголовок между HTTPS и HTTP. unsafe-url — всегда указывается полный URL. Синтаксис: referrerpolicy="origin" |
Элемент <area> представляет собой либо гиперссылку (если задан атрибут href) с некоторым текстом и соответствующей областью на изображении-карте, либо неактивную область.
Если элемент <area> представляет собой гиперссылку, в этом случае должен присутствовать атрибут alt. Если элемент <area> не имеет атрибута href, то область карты не может быть выбрана, и атрибут alt должен быть опущен.
В обоих случаях атрибуты shape и coords определяют область карты. Оба атрибута могут быть пропущены, в этом случае область на карте будет занимать все изображение.
Атрибуты target, download, rel, hreflang, type и referrerpolicy указываются только, если задан атрибут href.
<area shape="circle"
coords="200,75,50"
href="green.html"
alt="Green circle">По материалам Embedded content