HTML-тег object

Тег <object> встраивает внешний ресурс в HTML-документ. В современном HTML он чаще всего используется для встраивания PDF-документов (type="application/pdf"), SVG-графики (type="image/svg+xml"), изображений и других документов, которые браузер может отображать в строке страницы.

Исторически <object> применялся для загрузки браузерных плагинов, таких как Java-апплеты и Flash. Эти технологии устарели и больше не поддерживаются браузерами, поэтому не используйте <object> для этих целей. Сегодня его лучше всего рассматривать как контейнер для документа или изображения со встроенным резервным содержимым.

Любое содержимое, размещённое между открывающим и закрывающим тегами, является резервным: браузер показывает его только тогда, когда встроенный ресурс не может быть загружен или отображён (например, когда средство просмотра PDF недоступно). Это делает <object> удобным способом встраивания ресурсов, которые некоторые пользователи могут не иметь возможности просматривать.

Следует задать хотя бы один из атрибутов data или type. Атрибут data указывает URL ресурса; type сообщает браузеру MIME-тип ресурса, чтобы он мог выбрать подходящий обработчик. Для обычных растровых изображений тег <img> проще и обычно предпочтительнее.

Синтаксис

Тег <object> используется парно. Резервное содержимое записывается между открывающим (<object>) и закрывающим (</object>) тегами. Он размещается внутри тега <body>.

<object data="resource-url" type="mime/type" width="..." height="...">
  Fallback content shown when the resource cannot be displayed.
</object>

Встраивание PDF

Укажите в data путь к файлу .pdf и задайте type="application/pdf". Резервная ссылка позволяет пользователям скачать файл, если встроенный просмотр не поддерживается (что часто встречается в мобильных браузерах).

<!DOCTYPE html>
<html>
  <head>
    <title>Embed a PDF</title>
  </head>
  <body>
    <object
      data="https://api.w3docs.com/uploads/media/default/0001/01/sample.pdf"
      type="application/pdf"
      width="600"
      height="400"
      title="Sample PDF document">
      <p>
        Your browser can't display this PDF.
        <a href="https://api.w3docs.com/uploads/media/default/0001/01/sample.pdf">Download it instead</a>.
      </p>
    </object>
  </body>
</html>

Встраивание SVG

Используйте type="image/svg+xml" для встраивания отдельного SVG-файла. В отличие от <img>, SVG, загруженный через <object>, сохраняет собственный DOM и может выполнять внутренние скрипты и стили.

<!DOCTYPE html>
<html>
  <head>
    <title>Embed an SVG</title>
  </head>
  <body>
    <object
      data="https://api.w3docs.com/uploads/media/default/0001/01/diagram.svg"
      type="image/svg+xml"
      width="300"
      height="200"
      title="Architecture diagram">
      <img src="https://api.w3docs.com/uploads/media/default/0001/01/diagram.png" alt="Architecture diagram">
    </object>
  </body>
</html>

Встраивание видео

<object> также может указывать на медиафайл. Обратите внимание: для аудио и видео специализированные элементы <video> и <audio> являются современным и рекомендуемым выбором.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the webpage</title>
  </head>
  <body>
    <p>Embedded video with fallback content:</p>
    <object width="320" height="240" data="https://api.w3docs.com/uploads/media/default/0001/01/1280x720.mp4" type="video/mp4">
      <p>Your browser does not support the object tag. <a href="https://api.w3docs.com/uploads/media/default/0001/01/1280x720.mp4">Download the video</a> instead.</p>
    </object>
  </body>
</html>

Попробуйте сами »

`<object>` vs `<embed>` vs `<iframe>`

Все три элемента подключают внешнее содержимое на страницу, но различаются важными особенностями:

Элемент	Закрывающий тег?	Резервное содержимое?	Лучше всего для
`<object>`	Парный (`</object>`)	Да — содержимое между тегами	Встраивание PDF, SVG или другого документа с поддержкой резервного варианта
`<embed>`	Одиночный (без закрывающего тега)	Нет	Быстрое встраивание без резервного содержимого
`<iframe>`	Парный (`</iframe>`)	Ограниченное	Встраивание другой HTML-страницы (карты, видео, виджеты)

Кратко: выбирайте <iframe> для встраивания полного HTML-документа, <object> — когда нужен резервный вариант для не-HTML-ресурса, и <embed> — для минимального встраивания без резервного содержимого.

Передача параметров с помощью `<param>`

Тег <param>, размещённый внутри <object>, передаёт именованные параметры встроенному ресурсу. Это устаревший механизм, который в основном использовался для настройки плагинов; большинству современных встроенных документов и изображений он не нужен.

<object data="movie.swf" type="application/x-shockwave-flash">
  <param name="quality" value="high">
  <p>This content requires a plug-in that is no longer available.</p>
</object>

Доступность

Дайте <object> доступное имя, чтобы программы чтения с экрана могли его объявить. Добавьте атрибут title (или aria-label), описывающий встроенный ресурс:

<object data="report.pdf" type="application/pdf" title="2025 annual report (PDF)">
  <a href="report.pdf">Download the 2025 annual report</a>
</object>

Всегда предоставляйте содержательное резервное содержимое между тегами. Для пользователей, браузер которых не может отобразить встроенный тип, резервный вариант (например, ссылка для скачивания или статичное изображение) — это то, что они фактически видят, поэтому он должен быть самодостаточным.

Атрибут `usemap`

Атрибут usemap связывает объект с клиентской картой изображения, используя ссылку с хеш-именем на элемент <map> (например, usemap="#shapes"). Элементы <area> внутри карты затем определяют кликабельные области поверх встроенного ресурса.

Атрибуты

Атрибут	Значение	Описание
align	top bottom middle left right	Задаёт выравнивание содержимого внутри элемента относительно окружающих элементов. Не поддерживается в HTML5.
archive	URL	Задаёт разделённый пробелами список URL архивов, содержащих ресурсы, относящиеся к объекту. Не поддерживается в HTML5.
border	pixels	Задаёт ширину рамки вокруг элемента. Не поддерживается в HTML5.
classid	URL	Задаёт URL реализации объекта. Может использоваться вместе с атрибутом data или вместо него. Не поддерживается в HTML5.
codebase	URL	Определяет базовый путь для разрешения относительных URI, указанных в classid, data или archive. По умолчанию используется базовый URI текущего документа. Не поддерживается в HTML5.
codetype	media_type	Задаёт тип медиа кода, на который ссылается атрибут classid. Не поддерживается в HTML5.
data	URL	Задаёт URL ресурса, который будет использоваться объектом. Укажите хотя бы один из атрибутов `data` или `type`.
declare	declare	Указывает, что объект должен только объявляться, но не создаваться. Не поддерживается в HTML5.
form	form_id	Задаёт одну или несколько форм, которым принадлежит элемент.
height	pixels	Задаёт высоту объекта.
hspace	pixels	Задаёт отступ слева и справа от объекта. Не поддерживается в HTML5.
name	name	Задаёт имя объекта.
standby	text	Задаёт текст, отображаемый во время загрузки объекта. Не поддерживается в HTML5.
tabindex	number	Задаёт позицию элемента в порядке навигации по вкладкам для текущего документа.
type	media_type	Задаёт тип медиа (MIME-тип) ресурса в атрибуте data. Укажите хотя бы один из атрибутов `data` или `type`.
usemap	#mapname	Задаёт имя клиентской карты изображения, которая будет использоваться с объектом (ссылка с хеш-именем на элемент `<map>`).
vspace	pixels	Задаёт отступ сверху и снизу от объекта. Не поддерживается в HTML5.
width	pixels	Задаёт ширину объекта.

Тег <object> также поддерживает глобальные атрибуты и атрибуты событий.

Примечание: Атрибуты align, border, hspace и vspace устарели. Используйте CSS для разметки и стилизации в современной разработке.

Практика

Какова цель содержимого, размещённого между открывающим и закрывающим тегами object?

Это резервное содержимое, отображаемое когда встроенный ресурс не может быть загружен или отображёнОно всегда отображается поверх встроенного ресурсаОно задаёт заголовок, отображаемый во вкладке браузераОно игнорируется каждым браузером