HTML要素辞書 by Sentaro

<object>

埋め込み（Embedded）要素。外部リソース（画像、PDF、HTML、Javaアプレットなど）を埋め込むために使用されます。

info

概要

<object> 要素は、外部のマルチメディア（画像、PDF、SWFなど）や別のHTMLドキュメントなどのリソースを、現在のドキュメント内に埋め込むために使用されます。
かつてはFlashなどのプラグインを埋め込むために広く使われていましたが、現代では <audio>, <video>, <embed>, <iframe>, <img> などのより特化した要素に置き換えられることが多くなっています。ただし、特定のオブジェクトやPDF埋め込みなどで依然として利用されます。

play_circle

静的デモ

HTML

Preview (Result)

（ここでは静的なプレビューとして表示されます。実際には example.html の内容が埋め込まれます。）

埋め込みコンテンツを表示できませんでした。（フォールバックテキスト）

list

属性 (Attributes)

属性名	説明
data	埋め込むリソースのURLを指定します。必須属性です。
type	埋め込むリソースのMIMEタイプ（例: `text/html`, `application/pdf`, `image/svg+xml`）を指定します。
width	埋め込まれたオブジェクトの幅を指定します。ピクセルまたはパーセントで指定可能です。
height	埋め込まれたオブジェクトの高さを指定します。ピクセルまたはパーセントで指定可能です。
name	フォーム送信時に要素を参照するための名前を指定します。
usemap	オブジェクトがサーバー側イメージマップである場合、使用する `<map>` 要素の名前を指定します。

code

実用例

1. PDFファイルを埋め込む

<object data="document.pdf" type="application/pdf" width="500" height="300">
 <p>PDFビューアが利用できません。<a href="document.pdf">ファイルをダウンロード</a>してください。</p>
</object>

2. SVGファイルを埋め込む

<object data="logo.svg" type="image/svg+xml" width="100" height="100">
 <img src="logo.png" alt="ロゴ"> <!-- フォールバック画像 -->
</object>

3. 別のHTMLページを埋め込む（<iframe>の方が一般的）

<object data="sidebar-content.html" type="text/html" width="200" height="400">
 <p>コンテンツを読み込めません。</p>
</object>

lightbulb

知っておくと良い知識

warning

古い技術としての側面
<object> 要素は汎用的な埋め込みコンテナですが、現代のWeb開発では、特定の目的（画像: <img>、動画: <video>、別ページ埋め込み: <iframe>）に応じて、より適切でセキュアな要素を使うことが強く推奨されます。特にFlashの埋め込みは現在非推奨です。

accessibility_new

フォールバックコンテンツの重要性
<object> タグの開始タグと終了タグの間に記述されたコンテンツ（例：通常のテキストやリンク）は、ブラウザが埋め込みリソースを読み込めなかった場合に表示されます。これは、アクセシビリティとユーザー体験のために非常に重要です。必ず代替手段を提供してください。

私について利用規約および個人情報処理政策