【HTML】object・embed 要素の使い方｜PDF や SVG を埋め込む方法と iframe との違い

「資料の PDF をページ内でそのまま読ませたい」「配布している zip の中身を別形式で見せたい」——外部のファイルをページに埋め込みたいとき、真っ先に思いつくのは <iframe> でしょう。ただ HTML には、それ以外にも <object> と <embed> という埋め込み用の要素があります。

この2つは古くからある要素なので「もう使わないもの」と思われがちですが、現在の HTML 仕様にも残っていて、とくに <object> には <iframe> にないフォールバック（代替内容）という強みがあります。この記事では、それぞれの書き方、属性の違い、PDF を埋め込む実践例、そして <iframe> との使い分けを整理します。

object と embed はどう違うのか

ざっくり言うと、<object> は中身を書ける要素、<embed> は中身を書けない要素です。

<object> は開始タグと終了タグを持ち、その間に書いた内容が埋め込みに失敗したときの代替として表示されます。一方 <embed> は <img> と同じ空要素で、終了タグがありません。読み込めなければ何も表示されないままになります。

この違いが、そのまま使い分けの基準になります。

object 要素の書き方

埋め込むファイルの URL を data 属性に、その MIME タイプを type 属性に書きます。<img> の src にあたるものが data である点に注意してください。

<object
  data="/files/guide.pdf"
  type="application/pdf"
  width="100%"
  height="600">
  <!-- ここは埋め込めなかったときだけ表示される -->
  <p>
    PDF を表示できませんでした。
    <a href="/files/guide.pdf">ダウンロードしてご覧ください</a>。
  </p>
</object>

タグの間に書いた <p> は、正常に埋め込めているあいだは表示されません。ファイルが見つからない、ブラウザーがその形式に対応していない、といった理由で埋め込めなかったときだけ表に出てきます。

代替内容には HTML をそのまま書けるので、リンク、画像、説明文と、好きなものを置けます。「見られなかった人に何を見せるか」を自分で決められるのが <object> の一番の利点です。

下のデモは、わざと存在しないファイルを指定したものです。CSS タブも含めて確認してみてください。埋め込みに失敗した結果、中に書いた段落が表示されているのが分かります。

<p>下の object は存在しないファイルを指しているので、フォールバックが表示されます。</p>

<object class="viewer" data="not-found.pdf" type="application/pdf">
  <p class="fallback">
    PDF を表示できませんでした。
    <a href="not-found.pdf">ファイルをダウンロード</a>してご覧ください。
  </p>
</object>

.viewer {
  display: block;
  width: 100%;
  height: 180px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* フォールバックは object の中身として普通に表示される */
.fallback {
  margin: 0;
  padding: 24px;
  background: #f7f7f7;
  color: #444;
  text-align: center;
}

.fallback a {
  color: #1a73e8;
}

なお、古い解説では <object> の中に <param> 要素を並べて設定値を渡す書き方が紹介されていることがあります。これは Flash などのプラグインに引数を渡すための仕組みで、現在の仕様では非推奨です。新しく書くコードでは使いません。

embed 要素の書き方

<embed> は空要素なので、1行で書き切ります。URL は data ではなく src です。

<embed
  src="/files/guide.pdf"
  type="application/pdf"
  width="100%"
  height="600">

書く量は少なくて済みますが、代替内容を持てません。読み込めなかったときは、指定した大きさの空白がぽっかり残るだけです。閲覧者には何が起きたのか分からないので、実用上はほとんどの場面で <object> のほうが適しています。

どうしても <embed> を使うなら、すぐ下にダウンロードリンクを置いておくなど、表示できなかった人への逃げ道を自分で用意してください。

属性の比較

type は省略もできます。省略した場合、ブラウザーはサーバーが返す Content-Type ヘッダーを見て形式を判断します。ただし設定ミスで application/octet-stream などが返ってくると埋め込みに失敗するので、形式が分かっているなら書いておくほうが確実です。

PDF を埋め込むときの実際の書き方

この2つの要素がいま一番使われるのが PDF の表示です。実務で使える形にすると、次のようになります。

<figure class="pdf-viewer">
  <object
    data="/files/2026-guide.pdf#view=FitH&amp;page=1"
    type="application/pdf"
    aria-label="2026年度 利用ガイド（PDF）">
    <p>
      お使いの環境では PDF を表示できません。
      <a href="/files/2026-guide.pdf" download>
        2026年度 利用ガイド（PDF・1.2MB）をダウンロード
      </a>
    </p>
  </object>
  <figcaption>2026年度 利用ガイド</figcaption>
</figure>

ポイントが3つあります。

ひとつ目は aria-label です。<object> は中身が何なのかを支援技術に伝える手段を持たないので、ラベルを付けておきます。

ふたつ目は URL の後ろに付けた #view=FitH&page=1 です。これは PDF ビューアー向けのパラメーターで、表示倍率や開くページを指定できます。ブラウザー内蔵のビューアーが対応していれば効きますし、対応していなくても単に無視されるだけなので、付けておいて損はありません。

みっつ目は、代替リンクにファイルサイズを添えている点です。表示できなかった人はダウンロードするしかないので、押す前に容量が分かると親切です。

スマートフォンでは表示されないことが多い

ここは必ず押さえておいてください。モバイル端末のブラウザーの多くは、ページ内に埋め込まれた PDF を表示しません。ダウンロードに切り替わったり、1ページ目だけが画像のように出たり、何も表示されなかったりと、挙動は環境によってまちまちです。

つまり PDF の埋め込みは「デスクトップでは便利だが、スマートフォンでは代替内容が本体になる」と考えるべき機能です。代替内容を手抜きせずに書いておくことが、そのまま実用性につながります。

SVG を埋め込むと中のスクリプトが動く

PDF 以外で <object> が活きる場面として、SVG の読み込みがあります。

<img src="chart.svg"> のように <img> で読み込んだ SVG は、セキュリティ上の理由から内部のスクリプトや外部参照が動きません。アニメーションや対話的な操作を含む SVG は、ただの静止画になってしまいます。

<!-- スクリプトは動かない（静止画として表示される） -->
<img src="/images/interactive-chart.svg" alt="売上グラフ">

<!-- スクリプトが動く -->
<object data="/images/interactive-chart.svg" type="image/svg+xml">
  <img src="/images/chart-fallback.png" alt="売上グラフ">
</object>

<object> で読み込んだ SVG は独立した文書として扱われるため、中のスクリプトが実行され、CSS アニメーションも動きます。代替内容に PNG を置いておけば、読み込めない環境にも画像が出せます。HTML に SVG を直接書き込む（インライン SVG）方法と比べて、ファイルを分けたまま使えるのが利点です。

iframe との使い分け

3つの要素はどれも「外部のものをページに持ち込む」点では同じですが、得意分野が違います。

Web ページの埋め込みで <iframe> が選ばれるのは、sandbox・allow・loading="lazy" といった制御用の属性が揃っているからです。<object> にはこれらがありません。外部サイトを埋め込むなら <iframe> を使ってください。

逆に、ファイルを埋め込むだけで失敗時の見せ方を自分で決めたいなら <object> が向きます。<embed> については、<object> でできることの下位互換なので、新しく選ぶ理由はほぼありません。既存のコードで見かけたときに読めれば十分です。

表示されないときに確認すること

Content-Security-Policy でブロックされている

意外と多いのがこれです。CSP を設定しているサイトでは、<object> と <embed> の読み込み先は object-src ディレクティブで制御されます。<iframe> の frame-src とは別物なので、frame-src を許可しても <object> は通りません。

また、セキュリティ強化の定番として object-src 'none' を設定する構成が広く推奨されています。自分のサイトに設定されていないか、開発者ツールのコンソールを確認してください。ブロックされていれば、その旨のエラーが出ます。

MIME タイプが合っていない

type に書いた値と、サーバーが返す Content-Type が食い違っていると埋め込めません。開発者ツールのネットワークタブでレスポンスヘッダーを見て、PDF なら application/pdf、SVG なら image/svg+xml が返っているかを確認します。

とくに静的ファイルをそのまま配信しているサーバーでは、拡張子と MIME タイプの対応表に設定が入っていないと application/octet-stream が返ることがあります。その場合はサーバー側の設定を直します。

高さが 0 になっている

<object> は <img> のように中身に合わせて伸びてはくれません。width と height を指定しないと、ブラウザーの既定サイズ（かなり小さい）になるか、レイアウトによっては潰れて見えなくなります。CSS で height を指定するか、属性で数値を書いてください。デモの CSS のように display: block; と高さを当てておくのが扱いやすい形です。

まとめ

<object> は data と type で埋め込む対象を指定し、タグの間に代替内容を書ける要素です。<embed> は src を指定する空要素で、代替内容を持てません。この差がそのまま使い分けになり、実務では <object> を選ぶ場面がほとんどです。

主な使いどころは、PDF の埋め込みと、スクリプトを動かしたい SVG の読み込みです。PDF はモバイルで表示されないことが多いので、代替内容にダウンロードリンクを必ず用意してください。表示されないときは、CSP の object-src、サーバーが返す MIME タイプ、そして要素の高さ指定の3つを順に確認すると原因にたどり着けます。外部の Web ページを埋め込みたいだけなら、sandbox などの制御が効く <iframe> を選びましょう。

参考ページ

• <object>: 外部オブジェクト要素 – HTML | MDN
• <embed>: 埋め込み外部コンテンツ要素 – HTML | MDN
• <iframe>: インラインフレーム要素 – HTML | MDN
• CSP: object-src – HTTP | MDN