HTML тег <embed>
Тег <embed> встраивает внешнее содержимое в документ. Описание, атрибуты, примеры и замечания по доступности.
HTML тег <embed> встраивает внешнее содержимое в то место документа, где он появляется. Изначально он был контейнером для браузерных плагинов (Flash, Java-апплеты, QuickTime, RealPlayer) — отдельных программ, которым браузер передавал управление контентом.
На этой странице рассказывается, для чего используется <embed> сегодня, приводится рабочий пример с PDF, объясняется, чем он отличается от <object>, <iframe>, <video> и <audio>, а также описаны атрибуты и замечания по доступности.
Почему плагины ушли в прошлое (и для чего <embed> используется сейчас)
Браузерные плагины были выведены из эксплуатации во всей отрасли: NPAPI-плагины (Java, Silverlight) удалены из Chrome и Firefox, а Adobe Flash прекратил работу 31 декабря 2020 года. Они представляли угрозу безопасности и стабильности, а каждая их функция теперь реализована с помощью нативных HTML-элементов.
Поэтому <embed> редко является правильным выбором в новом коде. Единственное место, где он по-прежнему встречается, — встраивание PDF через встроенный браузерный просмотрщик PDF, который большинство современных браузеров предоставляют как обработчик контента, а не как плагин. Для всего остального лучше использовать специализированный элемент:
| Что нужно встроить… | Используйте вместо этого |
|---|---|
| Видеофайл | <video> |
| Аудиофайл | <audio> |
| Другую веб-страницу / внешний сайт | <iframe> |
| Любой ресурс с запасным вариантом | <object> |
<embed> vs <object> vs <iframe>
Все три элемента вставляют внешнее содержимое, но различаются гибкостью и поддержкой запасного варианта:
| Функция | <embed> | <object> | <iframe> |
|---|---|---|---|
| Закрывающий тег | Нет (пустой элемент) | Да | Да |
| Запасное содержимое | Нет — ничего не отображается, если тип не поддерживается | Да — содержимое между тегами отображается при ошибке | Да — содержимое между тегами отображается, если iframe отключены |
| Параметры | Только через атрибуты | Через дочерние элементы <param> | Через URL в src / атрибуты |
| Лучше всего подходит сегодня | Встроенный просмотрщик PDF | Ресурс, требующий изящного запасного варианта | Встраивание HTML-страниц |
В HTML5 <embed> является стандартным элементом, поэтому документы, использующие его, проходят валидацию корректно. Для более широкой совместимости можно поместить <embed> внутрь <object>, чтобы <embed> выступал в роли запасного варианта.
Используйте CSS-свойство object-position, чтобы скорректировать позиционирование встроенного объекта внутри фрейма элемента.
Синтаксис
Тег <embed> является пустым, то есть закрывающий тег не требуется. Однако в XHTML тег <embed> должен быть закрыт (<embed/>).
Пример HTML тега <embed> для вставки логотипа:
Пример HTML тега <embed>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" />
</body>
</html>Пример HTML тега <embed> для встраивания PDF:
Это наиболее распространённое современное использование <embed>. Браузер отображает PDF с помощью встроенного просмотрщика. Всегда указывайте type как application/pdf, чтобы браузер знал, как обрабатывать файл, и задавайте размеры embed, чтобы на странице было зарезервировано место.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed
type="application/pdf"
src="/files/sample.pdf"
width="600"
height="800"
title="Sample PDF document" />
</body>
</html>Пример HTML тега <embed> для вставки аудио:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed type="audio/mpeg"
src="/build/audios/audio.mp3"
width="200"
height="100" />
</body>
</html>Пример HTML тега <embed> для вставки видео:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed type="video/mp4"
src="/build/videos/arcnet.io(7-sec).mp4"
width="300"
height="200"
title="Arcnet.io video" />
</body>
</html>Приведённые примеры с аудио и видео работают, но в реальных проектах предпочтительнее использовать специализированные элементы <audio> и <video>. Они предоставляют элементы управления воспроизведением, несколько форматов источников, субтитры и запасной текст, которые <embed> обеспечить не может.
Почему атрибут type важен
Атрибут type содержит MIME-тип встраиваемого ресурса — стандартный идентификатор, который браузер использует для выбора подходящего обработчика контента. Его указание позволяет браузеру решить, как отображать содержимое (и пропустить загрузку того, что он не может обработать). Распространённые значения:
application/pdf— PDF-документvideo/mp4— видео в формате MP4audio/mpeg— аудиофайл MP3image/svg+xml— изображение SVG
Если type не указан, браузер попытается определить тип по расширению файла или заголовку Content-Type сервера, что менее надёжно.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| height | пиксели | Определяет высоту встроенного содержимого. |
| src | URL | Путь к встраиваемому ресурсу. |
| type | MIME-тип | MIME-тип встроенного содержимого (например, application/pdf или video/mp4), используемый для выбора подходящего обработчика контента. |
| width | пиксели | Определяет ширину встроенного содержимого. |
Тег <embed> поддерживает глобальные атрибуты и атрибуты событий.
Устаревшие и нестандартные атрибуты
Избегайте их использования — они не являются частью стандарта HTML5 и игнорируются современными браузерами:
| Атрибут | Статус | Что использовать вместо |
|---|---|---|
| align | Устаревший | CSS float и object-position |
| vspace, hspace | Устаревшие | CSS margin |
| pluginspage | Нестандартный | Ничего — плагины больше не существуют, скачивать или устанавливать нечего |
Доступность
<embed> не имеет встроенного доступного имени, поэтому программы чтения с экрана могут объявлять его просто как «встроенное содержимое» без дополнительных пояснений. Всегда добавляйте атрибут title, описывающий ресурс:
<embed type="application/pdf" src="/files/report.pdf"
width="600" height="800" title="2024 annual report (PDF)" />Поскольку <embed> является пустым элементом, он не может содержать запасное содержимое, как это делают <object> и <iframe>. Если ресурс не загрузится, отобразить что-либо взамен невозможно. Когда важен изящный запасной вариант — например, ссылка для скачивания для пользователей, чей браузер не может отобразить PDF, — оберните ресурс в элемент <object>, который позволяет размещать запасной HTML между его тегами.