<embed> 外部コンテンツを埋め込む

取り扱い 現行の標準
カテゴリ フロー・コンテンツ
フレージング・コンテンツ
パルパブル・コンテンツ
インタラクティブ・コンテンツ
エンベッデッド・コンテンツ
親にできる要素 エンベッデッド・コンテンツを受け入れる要素
子にできる要素 なし
対応ブラウザ caniuseで確認

<embed>タグの説明

<embed>は、外部コンテンツをウェブページに埋め込む祭に使用します。コンテンツの再生は、ブラウザにインストールされたプラグインによって行われるため、対応していない環境への配慮が必要となります。

本来、動画や音声などのメディアファイルを再生するには専用のソフトウェアが必要ですが、src属性で指定ファイルを読み込むことで、ブラウザにインストールされているプラグインにデータを渡します。実際にデータを処理するのはプラグイン側になるので、インストールされていない環境も想定しておいた方が良いでしょう。

<embed>は、かつてNetscape Navigator独自の要素でしたが、HTML5になり標準仕様に採用されました。しかし、セキュリティリスクの観点からプラグインを非推奨にするブラウザも出始めたため、このタグの出番は限られます。

コンテンツの埋め込みを行う方法は他にもあります。より多様な環境をカバーするのであれば、<object><iframe>の採用を検討すべきかもしれません。

<embed>タグの特徴

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • 視覚的な効果は特に与えられませんが、範囲を指定すると内部にコンテンツが埋め込まれます。
  • この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。

<embed>に指定できる主な属性

src="URL"
埋め込むリソースのURLを設定します。
type="MIMEタイプ"
再生するファイルのMIMEタイプを指定します。
width="幅"
埋め込みに使う横の範囲を絶対値で指定します。
height="高さ"
埋め込みに使う縦の範囲を絶対値で指定します。
グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。

<embed>の使い方とサンプル

<embed>は空要素であるため、終了タグがありません。そのため代替コンテンツを用意するには、<noembed>の併記が必要となります。ただし、この要素は標準仕様で非推奨となったため、<object><iframe>の採用が一般的となっています。

HTML
<embed src="images/flash/flash-sample.swf" width="100" height="100">
<noembed>FLASHを表示するにはプラグインが必要です。</noembed>
表示確認
FLASHを表示するにはプラグインが必要です。

<embed>に関連するHTMLタグ

オブジェクトやスクリプトを埋め込む要素
<img> 画像を表示する
<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する
<figure> 写真や図表などの自己完結した要素を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する
<audio> ドキュメント内に音声コンテンツを埋め込む
<video> ページ内に動画コンテンツを表示する
<source> 再生候補となる動画や音源などのメディアソースを指定する
<track> 動画や音声ファイルに字幕やキャプションを追加する
<embed> 外部コンテンツを埋め込む
<object> 外部リソースのオブジェクトを埋め込む
<param> パラメーターを指定する
<script> HTMLで実行可能なスクリプトを埋め込む
<noscript> スクリプトが動作しない環境での表示内容を指定する
<meter> 規定範囲内の数量や測定値を表す
<progress> 作業の進捗状況を示すプログレスバーを表示する
<output> 計算結果やユーザーアクションの出力欄を作成する
<dialog> 任意のタイミングで開くダイアログボックスを作成する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<slot> ウェブコンポーネントで独自に扱える枠を提供する