HyperText Markup Language object element.
object要素とは画像や動画、音声、プラグインデータ、HTML文書などのさまざまな形式を持つデータを文書に埋め込むための汎用的なタグです。applet要素、embed要素、bgsound要素、img要素などの替わりに使用されます。指定したデータにブラウザが対応していないなどの理由で利用できない場合には、object要素の内容が代替として使用されます。
ただし、object要素の動作はブラウザやバージョン、プラグインの種類などによって動作が異なり、対応も完全ではありません。そのため、限られた状況でしか使用できず object要素や applet要素や embed要素などが混在した状況になっています。
開始タグと終了タグの中に入れたコンテンツは、フォールバック・コンテンツとして機能します。もし object要素で組み込んだコンテンツがブラウザで表示できなかった場合に、フォールバック・コンテンツが代わりに表示されることになります。
このフォールバックは、iframe要素とは異なり、object要素をサポートしていないブラウザに対するフォールバックだけを対象にしたものではありません。object要素の data属性に指定した URLからデータを取得できなかった場合でも、フォールバックが機能します。
data属性にコンテンツの URLを、type属性に、そのコンテンツの MIMEタイプを指定すれば、ブラウザが対応していれば、それを表示することが可能です。
SVG を組み込んだマークアップ例
<object data="logo.svg" type="image/svg+xml">
<img src="logo.png" alt="株式会社○○○○" />
</object>
この例は、object要素を使って SVGで作られたイメージを表示します。しかし、ブラウザが SVGをサポートしていない場合は、object要素の開始タグと終了タグの中にあるコンテンツが表示されることになります。
object要素には、iframe要素のように HTMLを組み込むことも可能です。この場合、object要素には、新たにブラウジング・コンテキストが生成されます。object要素に name属性を指定することで、そのブラウジング・コンテキスト名を与えることができます。
HTML ファイルを組み込んだマークアップ例
<object data="child.html" type="text/html" name="figure"></object>
<p><a href="child2.html" target="figure">新着情報</a></p>
この例では、object要素に name属性をセットして、ブラウジング・コンテキスト名を指定しています。a要素の target属性に、そのブラウジング・コンテキスト名を指定することで、その a要素のハイパーリンクをたどると、object要素のコンテンツとして表示されることになります。Internet Explorerは、これに対応していませんが、それ以外のブラウザは対応しています。
usemap属性を指定すると、該当の object要素がイメージマップに関連付けられることを表すことができます。もし object要素のコンテンツがイメージでない場合は、この属性が指定されていたとしても、無視されます。
この属性には、map要素の name属性値の前に # を加えた値をセットします。
object要素は、フォーム関連要素にもなることができます。
通常、フォームを構成するコントロールは、form要素の中にマークアップする必要があります。しかし、form属性に form要素の id属性の値を指定することで、form要素の中になくても、その form要素が構成するフォームのコントロールとして機能します。
form コンテンツ属性のマークアップ例
<form id="frm" action="post.cgi" method="post">
<p><input type="submit" value="送信" /></p>
</form>
<p>
<object form="frm" data="calendar.swf" type="application/x-shockwave-flash" width="200" height="200" id="calendar">
<param name="movie" value="calendar.swf" />
<label>生年月日:<input type="date" name="birth" /></label>
</object>
</p>
この例は、プラグインを使って、独特のカレンダーのユーザー・インターフェースを用意したものを想定しています。フォールバック・コンテンツには、input要素でテキスト入力フィールドを用意しています。この object要素は form要素の中にマークアップされていませんが、form属性によって、手前にある form要素と関連付けられることになります。
width属性と height属性には、それぞれ、object要素によってレンダリングされる領域の横幅を指定することができます。
サイズを指定した object 要素のマークアップ例
<object data="logo.svg" type="image/svg+xml" width="150" height="150">
<img src="logo.png" alt="株式会社○○○○" width="150" height="150" />
</object>