HOME / WEB関連知識のスキルアップ / HTMLクイック･リファレンス / HTML5（目的別） / <embed​>

HTML5  <object>

<object>タグは、文書に外部リソースを埋め込む際に使用します。 <embed>がプラグインを必要とするデータを埋め込むのに対して、 <object>には外部リソース全般を指定することができます。

<object>タグで指定された外部リソースは、データのタイプにより、 画像、入れ子の閲覧コンテンツ、プラグインで処理されるデータのいずれかとして扱われます。

data属性は、文書に埋め込む外部リソースのURLを指定する際に使用します。 また、type属性は外部リソースのタイプを指定する際に使用します。 data属性とtype属性は、最低限どちらか一つを指定する必要があります。

<object>タグでプラグインデータを埋め込むと、そのデータの種類に応じてプラグインが呼び出されます。 この際、<object>～</object>の中に<param>を配置しておくと、 呼び出されるプラグインのパラメータを指定することができます。

また、<object>～</object>の中には、 <object>タグがサポートされていない環境用の内容を指定することができます。 例えば、<object>～</object>の中に、 <embed>でも同じ内容を指定しておくと、 動画などが再生される確率が高まるかもしれません。 ちなみに、embed要素は空要素であり、終了タグがありません。 従って、<embed>タグがサポートされていない環境用の内容を指定することはできません。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML5では、 align属性・ archive属性・ border属性・ classid属性・ codebase属性・ codetype属性・ declare属性・ hspace属性・ standby属性・ vspace属性が廃止されています。 一方で、新しくform属性が追加されています。

■属性

data属性
　　　外部リソースのURLを指定
type属性
　　　外部リソースのMIMEタイプを指定
name属性
　　　外部リソースの名前を指定
usemap属性
　　　イメージマップを利用する場合に、利用するイメージマップ名を指定
form属性
　　　フォーム要素と関連付ける場合に指定
width属性
　　　外部リソースの幅を指定
height属性
　　　外部リソースの高さを指定

■使用例

HTMLソース
<p>画像を指定します。</p>
<object data="images/kaeru.gif" type="image/gif" width="100" height="75"></object>

<p>マウスを乗せると反応するFlashです。</p>
<object data="images/wave.swf" width="400" height="300">
<p>ご覧の環境では、object要素がサポートされていないようです。embed要素で表示します。</p>
<embed src="images/wave.swf">
</object>

<p>PDFファイルを指定します。</p>
<object data="images/kaeru.pdf" width="400" height="300">
<p>ご覧の環境では、object要素がサポートされていないようです。<a href="images/kaeru.pdf">PDFファイルをダウンロードしてください</a>。</p>
</object>

<p>外部文書を指定します。</p>
<object data="sample/kaeru.html">
<p>ご覧の環境では、object要素がサポートされていないようです。<a href="sample/kaeru.html" target="_blank">外部文書を別ウィンドウで開いてください</a>。</p>
</object>

↓↓↓

ブラウザ上の表示

画像を指定します。

マウスを乗せると反応するFlashです。

PDFファイルを指定します。

外部文書を指定します。