embedタグ -外部メディアを埋め込む｜HTML辞典
<embed>タグとは？
<embed> タグは、外部のメディアコンテンツ（動画、音声、PDF、Flash など）を埋め込むためのタグです。<iframe> や <object> と似ていますが、よりシンプルな構造で外部コンテンツを埋め込めます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）、エンベッダブルコンテンツ（Embedded Content）。
閉じタグの有無
<embed> は 自己終了タグ のため、閉じタグ（</embed>）は不要 です。
基本的な記述方法
<embed src="sample.pdf" type="application/pdf" width="600" height="400">
使用できる主な属性
<embed> タグにはいくつかの重要な属性があります。
| 属性名 | 説明 | 例 |
|---|---|---|
src | 埋め込むコンテンツの URL | <embed src="video.mp4"> |
type | コンテンツの MIME タイプ | <embed type="application/pdf"> |
width | 埋め込むコンテンツの幅（px） | <embed width="600"> |
height | 埋め込むコンテンツの高さ（px） | <embed height="400"> |
CSSを使ったデザイン変更
<embed> 自体のスタイルを変更することはできませんが、CSS を使って wrapper を装飾できます。
.embed-container {
border: 1px solid #ccc;
padding: 5px;
width: 100%;
max-width: 800px;
}
適切な使用例
✅ PDF を埋め込む
<embed src="document.pdf" type="application/pdf" width="800" height="600">
✅ オーディオファイルを埋め込む
<embed src="audio.mp3" type="audio/mpeg">
✅ 動画ファイルを埋め込む
<embed src="movie.mp4" type="video/mp4" width="640" height="360">
適切でない使用例（誤った使い方）
❌ src 属性がないとコンテンツが表示されない
<!-- NG: src属性なし -->
<embed type="application/pdf" width="800" height="600">
✅ 正しい書き方（src を指定）
<embed src="document.pdf" type="application/pdf" width="800" height="600">
❌ type 属性を指定しないと、一部のブラウザで正しく動作しない
<!-- NG: type属性なし -->
<embed src="video.mp4" width="640" height="360">
✅ 正しい書き方（type を指定）
<embed src="video.mp4" type="video/mp4" width="640" height="360">
<embed>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<embed> | 外部コンテンツを埋め込む | シンプルな構造、自己終了タグ | PDF、音声、動画の埋め込み |
<iframe> | 他の HTML ページを埋め込む | src に外部サイトの URL を指定 | YouTube 動画、Google マップ |
<object> | 外部コンテンツを埋め込む | param で詳細設定可能 | Flash、PDF、SVG |
使用上の注意点
✅ src 属性を必ず指定する
srcがないと、埋め込まれるコンテンツが表示されない。
✅ type を指定してコンテンツの種類を明示する
- ブラウザが正しく処理できるように
typeを設定する。
✅ <iframe> や <object> との使い分けを考慮する
- 外部サイトを埋め込む場合は
<iframe>を使用するのが一般的。
関連タグ
まとめ
<embed> タグは、HTML文書内で 外部のメディアコンテンツ（PDF、音声、動画など）を埋め込むためのタグ です。src と type を適切に設定し、必要に応じて <iframe> や <object> との使い分けを検討することが重要です。
