Тег object в HTML - как встраивать сторонний контент и управлять им

05 марта 2026

Автор

Олег Марков

Введение

Тег object в HTML позволяет встраивать во страницу внешний контент, который браузер может обработать с помощью встроенных или подключаемых модулей. Раньше его часто использовали для вставки Flash, Java-аплетов, PDF и других форматов. Сейчас его роль уменьшилась, но он по-прежнему полезен в узких и специфичных случаях, когда другие теги не подходят.

Здесь вы разберетесь, как работает object, какие у него атрибуты, чем он отличается от iframe и embed, как обрабатывать ошибки при загрузке контента и почему этот тег не стоит использовать "по привычке", а только там, где он действительно нужен.

Основные сценарии использования тега object

Когда имеет смысл использовать object сегодня

Тег object можно встретить в таких сценариях:

встраивание PDF-документов;
встраивание SVG-графики (как внешнего файла);
редкие случаи работы с устаревшими плагинами в корпоративных системах;
встраивание альтернативного контента с гибкой деградацией (fallback).

Во многих случаях вместо object лучше использовать более узкоспециализированные элементы:

для видео — тег <video>;
для аудио — тег <audio>;
для изображений — тег <img> или <picture>;
для HTML-страниц и веб-приложений — тег <iframe>.

Смотрите, я покажу вам, как выглядит базовый случай с PDF:

<object
  data="files/manual.pdf"  <!-- Путь к PDF-файлу -->
  type="application/pdf"   <!-- MIME-тип контента -->
  width="600"              <!-- Ширина области отображения -->
  height="800"             <!-- Высота области отображения -->
>
  <!-- Fallback-контент если PDF не будет отображен -->
  <p>
    Не удалось отобразить PDF-документ.
    <a href="files/manual.pdf">Скачать PDF</a>
  </p>
</object>

Как видите, если браузер не сможет отобразить PDF, пользователь увидит текст и ссылку для скачивания.

Синтаксис и базовые атрибуты object

Базовая структура тега

Тег object — парный. Общий вид:

<object
  data="URL-ресурса"
  type="MIME-тип"
  name="имя-объекта"
  width="ширина"
  height="высота"
>
  <!-- Внутри размещаем fallback-контент -->
</object>

Ключевые моменты:

data — ссылка на ресурс (файл, страницу, другое содержимое);
type — MIME-тип, который помогает браузеру понять, как обрабатывать ресурс;
внутри тега размещается запасной контент на случай, если объект не загрузится или не поддерживается.

Теперь давайте разберем атрибуты детальнее.

Атрибут data

Атрибут data указывает адрес ресурса, который должен быть загружен в область object.

<object
  data="/media/map.svg"    <!-- SVG-файл -->
  type="image/svg+xml"
  width="400"
  height="400"
>
  <p>Ваш браузер не поддерживает отображение SVG.</p>
</object>

Если data не задан:

браузер не загружает внешний ресурс;
содержимое внутри object становится основным отображаемым контентом;
поведение зависит от браузера, но чаще всего вы просто увидите вложенное содержимое.

Так можно, например, использовать object как контейнер с возможным внешним контентом:

<object id="dynamic-object" width="300" height="200">
  <!-- Здесь можно разместить стартовый контент -->
  <p>Контент будет подгружен динамически через скрипт.</p>
</object>

Позже вы можете задать или изменить data через JavaScript.

Атрибут type

Атрибут type содержит MIME-тип загружаемого ресурса. Он помогает браузеру решить:

чем обрабатывать этот ресурс;
поддерживается ли такой тип контента вообще.

Примеры часто используемых типов:

application/pdf — для PDF;
image/svg+xml — для SVG;
text/html — для HTML-страниц;
application/x-shockwave-flash — для Flash (устарело и не рекомендуется).

Пример:

<object
  data="report.pdf"
  type="application/pdf"  <!-- Явно указываем что это PDF -->
  width="100%"
  height="600"
>
  <p>Не удалось загрузить встроенный просмотр PDF.</p>
</object>

Рекомендация: всегда задавайте type, если точно знаете формат. Это повышает предсказуемость поведения и помогает браузеру быстрее определить обработчик.

Атрибут name

Атрибут name задает имя объекта. Раньше это использовалось для обращения к встраиваемому содержимому и для интеграции с плагинами. Сейчас его роль минимальна, но вы все еще можете встретить такой код:

<object
  data="widget.html"
  type="text/html"
  name="weatherWidget"
  width="300"
  height="200"
>
  <p>Не удалось загрузить виджет погоды.</p>
</object>

Обратите внимание, что для современных задач обычно используют id и JavaScript вместо name.

Атрибуты width и height

Эти атрибуты задают размер области, в которой отображается объект.

<object
  data="chart.svg"
  type="image/svg+xml"
  width="600"    <!-- пиксели по умолчанию -->
  height="400"
>
  <p>График недоступен.</p>
</object>

Несколько нюансов:

значение без единиц трактуется как пиксели;
вы можете использовать проценты (например 100%) — это зависит от поддержки браузером и контекста, в котором размещен object;
если размеры не заданы, объект может занять размер по умолчанию или подстроиться под содержимое — поведение различается.

Практически всегда лучше явно задавать размеры, особенно для медиа-контента.

Дополнительные атрибуты object

Атрибут form

Атрибут form позволяет связать объект с определенной формой, даже если он не находится внутри нее в HTML-структуре.

<form id="settings-form">
  <!-- Здесь поля формы -->
</form>

<object
  data="settings-panel.html"
  type="text/html"
  form="settings-form"  <!-- Привязка к форме -->
  width="400"
  height="300"
>
  <p>Панель настроек недоступна.</p>
</object>

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

Атрибут typemustmatch

Атрибут typemustmatch усиливает проверку соответствия между значением type и реальным MIME-типом ресурса. Если типы не совпадут, объект не будет загружен.

<object
  data="diagram.svg"
  type="image/svg+xml"
  typemustmatch   <!-- Требуем совпадения MIME-типа -->
  width="500"
  height="300"
>
  <p>Не удалось отобразить SVG-диаграмму.</p>
</object>

Зачем это нужно:

дополнительная безопасность — вы предотвращаете случайную подмену типа (например загрузку HTML вместо ожидаемого изображения);
более предсказуемое поведение в сложных системах.

Если вы точно контролируете сервер и MIME-типы, этот атрибут может быть полезен в чувствительных местах.

Атрибут usemap (устаревающий сценарий)

Атрибут usemap позволяет связать object с картой-изображением (image map). Сейчас этот сценарий почти не используется, чаще его применяли с тегом img.

Пример синтетический, но покажу для понимания:

<object
  data="schema.svg"
  type="image/svg+xml"
  usemap="#schema-map"   <!-- Ссылаемся на карту -->
  width="800"
  height="600"
>
  <p>Схема недоступна.</p>
</object>

<map name="schema-map">
  <!-- Области карты -->
  <area shape="rect" coords="10,10,100,100" href="/section1" alt="Раздел 1">
  <area shape="rect" coords="110,10,200,100" href="/section2" alt="Раздел 2">
</map>

В современном HTML для интерактивных схем чаще используют чистый SVG с обработчиками событий или обычные ссылки внутри SVG.

Вложенные параметры с помощью param

Что делает тег param

Внутри object вы можете использовать теги param, чтобы передать параметры встраиваемому объекту. Исторически это использовалось для настройки плагинов (например Flash).

Общий вид:

<object data="..." type="..." width="..." height="...">
  <param name="имя-параметра" value="значение">
  <!-- Fallback-контент -->
</object>

Давайте разберемся на примере с гипотетическим плеером:

<object
  data="player.swf"              <!-- Файл плеера (устаревший пример) -->
  type="application/x-shockwave-flash"
  width="640"
  height="360"
>
  <!-- Параметр с URL медиа-файла -->
  <param name="movie" value="videos/intro.mp4">
  <!-- Параметр автозапуска -->
  <param name="autoplay" value="true">
  <!-- Параметр повтора -->
  <param name="loop" value="false">

  <!-- Fallback-сообщение -->
  <p>
    Для просмотра видео необходим Flash-плеер.
  </p>
</object>

Комментарии:

name — имя параметра, которое ожидает плагин или обработчик;
value — значение параметра;
список поддерживаемых параметров зависит от конкретного плагина или встраиваемого приложения.

Сегодня param почти не используется в новых проектах, но вы можете встретить его в старых системах. Понимание механизма поможет вам оценить, как это устроено и чем заменить.

Параметры для HTML и SVG-контента

Для HTML и SVG, которые вы встраиваете через object, параметризация через param обычно не применяется. Вместо этого:

вы передаете параметры через URL (query-параметры);
используете postMessage (для HTML);
настраиваете поведение на стороне сервера.

Пример с передачей параметров через URL:

<object
  data="widget.html?theme=dark&lang=ru"  <!-- Параметры в адресе -->
  type="text/html"
  width="300"
  height="200"
>
  <p>Виджет недоступен.</p>
</object>

Внутри widget.html вы читаете параметры через JavaScript и настраиваете интерфейс.

Обработка ошибок и fallback-контент

Как работает fallback внутри object

Одно из ключевых преимуществ object — возможность задать альтернативный контент внутри тега. Этот контент отображается, если:

ресурс из data не загрузился;
браузер не поддерживает тип содержимого;
встраивание запрещено настройками безопасности.

Например:

<object
  data="interactive-map.html"
  type="text/html"
  width="800"
  height="600"
>
  <!-- Этот блок увидят пользователи если карта не загрузится -->
  <p>
    Интерактивная карта недоступна.
    <a href="/contacts">Перейдите на страницу контактов</a>, чтобы увидеть адрес и схему проезда.
  </p>
</object>

Здесь fallback-контент — это не просто сообщение "ошибка", а осмысленная альтернатива.

Вложенные структуры как fallback

Внутрь object вы можете помещать любую HTML-разметку. Это дает гибкость:

<object
  data="report.pdf"
  type="application/pdf"
  width="100%"
  height="600"
>
  <!-- Альтернативный интерфейс -->
  <section>
    <h3>Отчет в формате PDF недоступен</h3>
    <p>Вы можете скачать отчет в другом формате.</p>
    <ul>
      <li><a href="report.docx">Скачать в формате DOCX</a></li>
      <li><a href="report.html">Посмотреть HTML-версию</a></li>
    </ul>
  </section>
</object>

Давайте посмотрим, что важно при проектировании fallback-контента:

он должен решать задачу пользователя, а не просто сообщать о проблеме;
по возможности предлагайте альтернативные форматы;
не забывайте про доступность: используйте понятный текст и корректные ссылки.

Проверка загрузки object через JavaScript

У object нет встроенного события onerror, как у img. Однако вы можете косвенно отслеживать загрузку и состояние через события load и error некоторых типов встраиваемого контента или через таймауты и внешние проверки.

Простейший подход — использовать timeout и смену класса/контента, если object слишком долго не загружается:

<!-- HTML -->
<object
  id="pdf-viewer"
  data="files/manual.pdf"
  type="application/pdf"
  width="100%"
  height="600"
>
  <p>PDF недоступен. <a href="files/manual.pdf">Скачать файл</a></p>
</object>

<script>
// Здесь мы пытаемся отследить загрузку PDF через таймер
const obj = document.getElementById('pdf-viewer')

let loaded = false

// Попробуем повесить обработчик load если браузер поддерживает
obj.addEventListener('load', function () {
  // В некоторых браузерах это событие для object не сработает
  loaded = true
})

// Через 5 секунд проверим состояние
setTimeout(function () {
  if (!loaded) {
    // Здесь вы можете изменить интерфейс
    // Например показать сообщение о задержке
    console.warn('Встраиваемый объект загружается слишком долго')
  }
}, 5000)
</script>

Это не идеальное решение, но оно демонстрирует подход. В реальных системах для критичных случаев лучше использовать другие механизмы отображения (например iframe, у которого есть более предсказуемые события загрузки).

Доступность и SEO при использовании object

Текстовые альтернативы

Когда вы встраиваете содержимое через object, поисковые системы и некоторые технологии доступности могут не интерпретировать его напрямую (зависит от типа контента). Поэтому fallback-контент становится не только "на случай ошибки", но и важной частью доступности.

Рекомендации:

внутри object размещайте текст, который описывает содержимое и его назначение;
добавляйте ссылки на альтернативные версии (HTML, текст, изображения);
не ограничивайтесь фразой "контент недоступен" — объясните, о чем этот контент.

Пример:

<object
  data="sales-chart.svg"
  type="image/svg+xml"
  width="600"
  height="400"
>
  <h3>График продаж за 2024 год</h3>
  <p>
    Здесь должен отображаться интерактивный график продаж.
    Если он недоступен, вы можете:
  </p>
  <ul>
    <li><a href="sales-2024-table.html">Посмотреть данные в табличном виде</a></li>
    <li><a href="sales-2024.csv">Скачать CSV-файл с данными</a></li>
  </ul>
</object>

Здесь текст внутри object:

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

Роль object в структуре документа

Сам по себе object не добавляет семантики. Если вы встраиваете важный для страницы элемент (например отчет, диаграмму, интерактивный блок), имеет смысл "обернуть" object в более семантический контейнер:

<section aria-labelledby="report-title">
  <h2 id="report-title">Отчет о посещаемости сайта</h2>

  <object
    data="analytics-report.html"
    type="text/html"
    width="100%"
    height="600"
  >
    <p>
      Интерактивный отчет недоступен.
      <a href="analytics-report.pdf">Скачать отчет в формате PDF</a>.
    </p>
  </object>
</section>

Так вы сохраняете понятную структуру документа, а object становится просто техническим способом встраивания содержимого.

Сравнение object с iframe и embed

object против iframe

Разберем основные отличия, чтобы вы могли осознанно выбирать инструмент.

iframe:

используется для встраивания других HTML-документов;
имеет отдельный контекст браузера (отдельное окно / вкладка внутри страницы);
хорошо интегрирован с политиками безопасности (CSP, sandbox, allow-атрибуты);
имеет предсказуемые события загрузки (load);
удобен для встраивания виджетов, карт, форм, сторонних приложений.

object:

может встраивать разные типы контента (PDF, SVG, HTML и др.);
поддерживает fallback-контент;
исторически использовал плагины;
имеет менее предсказуемую модель событий и поддержки.

Давайте посмотрим на примеры встраивания HTML с помощью обоих тегов:

<!-- Встраивание через iframe -->
<iframe
  src="widget.html"              <!-- Адрес HTML-страницы -->
  width="300"
  height="200"
  loading="lazy"                 <!-- Отложенная загрузка -->
  title="Виджет новостей"        <!-- Атрибут для доступности -->
></iframe>

<!-- Встраивание через object -->
<object
  data="widget.html"             <!-- Тот же ресурс -->
  type="text/html"
  width="300"
  height="200"
>
  <p>Виджет недоступен.</p>      <!-- Fallback-контент -->
</object>

В большинстве случаев для HTML-контента лучше использовать iframe:

он более предсказуем;
имеет развитую поддержку настроек безопасности;
проще в диагностике проблем.

object стоит использовать, когда:

вам нужен fallback-контент внутри разметки;
вы встраиваете не HTML, а другие типы (PDF, SVG и т.п.);
у вас есть исторические или корпоративные ограничения.

object против embed

Тег embed — это еще один способ встраивания внешнего контента. Он появился как более "прямой" и минималистичный вариант object.

Пример:

<embed
  src="report.pdf"               <!-- Путь к файлу -->
  type="application/pdf"         <!-- MIME-тип -->
  width="600"
  height="800"
/>

Отличия:

embed — одиночный тег, не поддерживает внутренний fallback-контент;
object — парный тег, поддерживает вложенный HTML для альтернативного отображения;
поддержка атрибутов и событий у embed часто проще и предсказуемее.

Если вам достаточно просто встроить контент без сложных сценариев отказоустойчивости, embed может быть чуть проще. Но если вы хотите гибкий fallback и лучше контролировать поведение при ошибках, object предпочтительнее.

Практические примеры использования object

Встраивание PDF-документа с альтернативой

Давайте разберемся на развернутом примере с PDF:

<section aria-labelledby="manual-title">
  <h2 id="manual-title">Руководство пользователя</h2>

  <object
    data="docs/user-manual.pdf"      <!-- Встроенный PDF -->
    type="application/pdf"
    width="100%"
    height="700"
  >
    <!-- Fallback интерфейс -->
    <p>
      Встроенное отображение PDF недоступно.
      Вы можете:
    </p>
    <ul>
      <li>
        <a href="docs/user-manual.pdf">Скачать руководство в формате PDF</a>
      </li>
      <li>
        <a href="docs/user-manual.html">Открыть HTML-версию руководства</a>
      </li>
    </ul>
  </object>
</section>

Здесь я размещаю пример, чтобы вам было проще понять:

как встроить PDF;
как организовать fallback;
как вписать это в семантическую структуру страницы.

Встраивание внешнего SVG-файла

SVG можно вставлять разными способами: через img, как inline-разметку, через object. object полезен, когда вам нужно:

использовать внешний SVG-файл;
сохранить интерактивность и встроенные скрипты внутри SVG;
иметь fallback-контент.

<section aria-labelledby="diagram-title">
  <h2 id="diagram-title">Структура системы</h2>

  <object
    data="img/system-diagram.svg"     <!-- Внешний SVG -->
    type="image/svg+xml"
    width="800"
    height="600"
  >
    <!-- Альтернативный контент если SVG недоступен -->
    <p>
      Схема недоступна.
      <a href="img/system-diagram.png">Посмотреть схему в формате PNG</a>.
    </p>
  </object>
</section>

Обратите внимание:

интерактивные элементы внутри SVG могут работать автономно;
стилизовать содержимое SVG снаружи (через CSS страницы) сложнее, чем в случае inline SVG.

Встраивание HTML-виджета с fallback

Иногда вам нужно встроить небольшой HTML-виджет, но при этом обеспечить работу даже в условиях, когда встраивание ограничено. В таких случаях вы можете использовать и object, и iframe, но object даст вам более гибкий fallback прямо в разметке.

<section aria-labelledby="feedback-title">
  <h2 id="feedback-title">Обратная связь</h2>

  <object
    data="widgets/feedback-form.html"   <!-- Встраиваемый виджет формы -->
    type="text/html"
    width="100%"
    height="400"
  >
    <!-- Альтернативный вариант если виджет не загрузится -->
    <p>
      Форма обратной связи сейчас недоступна.
      Вы можете написать нам на электронную почту
      <a href="mailto:support@example.com">support@example.com</a>
      или позвонить по телефону +7 000 000 00 00.
    </p>
  </object>
</section>

Теперь вы увидите, как это выглядит в коде: внешний виджет обеспечивает основной сценарий, а текст внутри object — резервный.

Безопасность при использовании object

Потенциальные риски

Хотя тег object сейчас используется реже, важно понимать риски:

встраивание потенциально вредоносного содержимого (особенно если URL формируется динамически);
уязвимости плагинов (в старых системах);
неожиданные взаимодействия с политиками Content Security Policy (CSP).

Основные рекомендации:

Не встраивайте в object ресурсы из непроверенных источников.
Явно указывайте type и по возможности используйте typemustmatch.
Для встраивания внешних HTML-страниц по современным требованиям чаще используйте iframe с sandbox, а не object.

Взаимодействие с заголовками Content-Type и X-Content-Type-Options

Сервер, который отдает ресурс для object, должен:

корректно указывать Content-Type, соответствующий реальному содержимому;
по возможности не использовать неправильный тип (например text/html вместо application/pdf).

Если сервер присылает заголовок X-Content-Type-Options: nosniff, браузер перестает "догадываться" о типе файла и строго полагается на заголовок Content-Type. В связке с typemustmatch это может привести к ситуации, когда объект не загрузится, если вы:

указали type="application/pdf";
но сервер отдал файл как application/octet-stream.

В результате object посчитает, что типы не совпадают, и fallback-контент будет показан.

Поэтому, если вы контролируете сервер, убедитесь, что:

MIME-типы настроены корректно;
для часто используемых форматов (pdf, svg) есть правильные заголовки.

Совместимость и статус стандарта

Статус тега object в спецификации

Тег object является частью HTML Living Standard (WHATWG) и HTML5. Он не объявлен устаревшим, но:

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

Основное современное назначение:

встраивание документов (PDF);
встраивание векторной графики (SVG);
узкие случаи, когда требуется fallback и работа с нестандартными форматами.

Поддержка в браузерах

Поддержка object есть во всех современных браузерах, но есть нюансы:

поведение некоторых атрибутов (например typemustmatch) может различаться;
события загрузки и ошибки работают менее прозрачно, чем у img или iframe;
поддержка конкретных типов контента зависит от браузера (например встроенный просмотр PDF есть не везде или может быть отключен).

Практический подход:

тестируйте ключевые сценарии (PDF, SVG) в основных браузерах;
всегда предоставляйте fallback-контент;
для критичных функций используйте дублирование (например, ссылка "Скачать PDF" рядом с встроенным просмотром).

Итоги

Тег object в HTML — это универсальный, но сейчас довольно нишевой инструмент для встраивания внешнего контента. Он особенно полезен:

когда вы работаете с PDF или SVG как с внешними файлами;
когда вам нужно встроить нестандартный формат, а браузер умеет его отображать;
когда важно иметь гибкий fallback-контент прямо в разметке.

Однако в большинстве повседневных задач object не является первым выбором. Для видео, аудио, изображений и HTML-страниц лучше использовать специализированные теги — video, audio, img, iframe. Они дают более предсказуемое поведение, лучше интегрированы с современными механизмами безопасности и доступности.

Если вы все же применяете object, обращайте внимание на:

корректную настройку атрибутов data и type;
продуманный fallback-контент, который не только сообщает об ошибке, но и предлагает альтернативу;
безопасность и соответствие MIME-типов на стороне сервера;
реальные сценарии использования: не стоит тянуть object туда, где проще и надежнее обойтись другими элементами.

Частозадаваемые технические вопросы

Как программно поменять содержимое object без перезагрузки страницы

Вы можете изменить атрибут data через JavaScript и тем самым "перезагрузить" объект:

<object id="viewer" data="file1.pdf" type="application/pdf" width="100%" height="600">
  <p>PDF недоступен.</p>
</object>

<script>
// Здесь мы меняем отображаемый PDF на другой
function loadPdf(path) {
  const obj = document.getElementById('viewer')
  obj.data = path      // Меняем путь к файлу
  // В некоторых браузерах можно принудительно перезагрузить
  // obj.type = obj.type  // Хак для перезапуска загрузки
}
</script>

Вызовите loadPdf("file2.pdf"), чтобы загрузить другой документ.

Можно ли общаться с HTML внутри object так же, как с iframe

Поддержка похожих сценариев ограничена и сильно зависит от браузера. Для HTML лучше использовать iframe и postMessage, поскольку:

iframe явно предназначен для встраивания HTML-документов;
у него есть устойчивая поддержка взаимодействия между окнами через window.postMessage.

Если вы все же используете object с type="text/html", взаимодействие с содержимым может быть нестабильным, поэтому для сложных интеграций он не рекомендуется.

Как заставить object подстраиваться по высоте под содержимое

Браузеры не предоставляют надежного способа автоматически "подгонять" высоту object под содержимое, особенно если это PDF или другой нестандартный формат. Как правило: