HTMLのobject要素とは？属性の使い方やサンプルコードを解説

HTMLのobject要素の使いどころが分からない、なんて思ったことはありませんか？

頻繁に使う要素ではないので、いざ扱うとなると、戸惑うことも多いですよね。

今回は、HTMLのobject要素をきちんと理解したいという方に向けて、

について、詳しく解説していきます。

この記事を読むことで、HTMLのobject要素の特徴が分かるようになりますよ。

ぜひ最後まで読んでくださいね。

object要素とは？どんな時に使うもの？

<object data="外部リソースのURL" type="MIMEタイプ" width="横幅" height="高さ">
代替コンテンツ
</object>

object要素は、現在の文書の中に、外部リソースを埋め込むことができます。

埋め込むことが可能な外部リソースは、画像や音声、HTML文書、PDFファイルなどのデータです。

object要素を使うメリットは？

埋め込む外部リソースが、画像の場合はimg要素、HTML文書の場合はiframe要素というように、他の要素でも同様のことが可能です。

では、object要素を使うメリットは何があるのでしょうか？

object要素には、開始タグと終了タグがあり、子要素を持つことができます。

子要素の中で複数の代替コンテンツを指定しておき、環境に合わせた表示をさせることが可能になります。

img要素は終了タグがないため、子要素を持つことができません。

iframe要素は終了タグを持っているのですが、内容として含められるコンテンツの定義は、空となっています。

そのため、代替コンテンツを含みたいときには、object要素が便利です。

逆に、代替コンテンツを必要としないときには、専用タグを使った方が望ましい場合があります。

iframe要素で埋め込まれた外部リソースは、親ドキュメントと情報のやり取りができます。

例えば、YouTube動画の埋め込みでも、再生回数などの閲覧情報が送信されますね。

object要素が対応していない環境では

ユーザーの閲覧環境によっては、object要素が対応していない場合があります。

object要素は、前述したように、その中で代替コンテンツを指定することができます。

動画を読み込む際に、embed要素やvideo要素などを子要素に指定しておけば、object要素に対応していないブラウザのでも再生できる可能性が上がります。

それでも再生できない場合は、動画サイトへのリンクを組み込むことも可能です。

object要素の属性について

object要素を使うには、属性をきちんと把握しておく必要があります。

現在使用できる属性は、以下のようになっています。

HTML5になって、align属性、archive属性、border属性、classid属性、codebase属性、codetype属性、declare属性、hspace属性、standby属性、vspace属性は廃止されました。

HTML5では、これらの属性を使用しないようにしましょう。

それでは、使用できる属性について、それぞれ説明していきます。

data属性

data属性は、読み込む外部リソースのURLを示します。

外部リソースは、object要素の子要素に配置したparam要素で指定することもできます。

そのため、省略は可能ですが、object要素では、data属性かtype属性のどちらか一方を指定する必要があります。

type属性

type属性は、読み込む外部リソースのデータタイプを示します。

値は、MIMEタイプで定義された「text/html」や「image/gif」などで指定します。

外部リソースをブラウザに表示させるための、プラグインの選択に必要な属性です。

name属性

name属性は、外部リソースの名前を示します。値は任意の文字列を指定します。

外部リソースとして、他のHTML文書を埋め込む際には、この属性の値は領域の名前になります。

後述のサンプルでも示しますが、a要素のtarget属性を同じ値にすることで、object要素と関連付けすることができます。

usemap属性

usemap属性は、map要素を使う際にイメージマップ名を指定します。

map要素のname属性の値に#を足したものを記入すると、map要素と関連付けが行われます。

width属性

width属性は、読み込む外部リソースの横幅を指定します。

値の単位は、ピクセルかパーセンテージになります。

スタイルシートで横幅が指定されている場合には、width属性よりもスタイルシートが優先されます。

height属性

height属性は、読み込む外部リソースの高さを指定します。

width属性と同様に、単位はピクセルかパーセンテージになります。

typemustmatch属性

typemustmatch属性は、data属性とtype属性が両方指定されたときに使用する属性です。

typemustmatch属性を指定した場合、「data属性で指定された外部リソースのMIMEタイプ」と「type属性のMIMEタイプ」が一致したときにのみ、外部リソースを利用します。

一致していない場合、代替コンテンツがあれば、これを使用します。

form属性

form属性は、form要素との関連付けができます。

form要素の中にobject要素がある場合、form要素のid属性と同じ値を指定することで、関連付けを行います。

object要素の使い方・サンプルコード

object要素の属性について、学習できたでしょうか？

ここでは、サンプルコードを示して、具体的な使い方について紹介します。

画像ファイルを埋め込む

<object data="images/sample.png" width="100" height="75">画像を表示できません</object>

このように記述すると、用意した画像「images/sample.png」を読み込むことができます。

ファイルが見つからない場合や、閲覧の環境がobject要素に対応していない場合には、代替コンテンツとして、中の文章が表示されます。

PDFファイルを埋め込む

<object data="images/sample.pdf" width="400" height="300">
<p>object要素がサポートされていないようです。</p>
<p><a href="images/sample.pdf">こちら</a>からPDFファイルをダウンロードしてください。</p>
</object>

上記のコードでは、「images/sample.pdf」が文書の中に埋め込まれます。

こちらの場合も、ファイルが見つからない場合や、閲覧の環境がobject要素に対応していない場合には、代替コンテンツが表示されます。

PDFまでのページをリンクとして貼っておくと良いでしょう。

入れ子にされたブラウジング・コンテキスト

<object data="sample.html">
<p>object要素がサポートされていないようです。</p>
<p><a href="sample.html">こちら</a>から開いてください</p>
</object>

ブラウジング・コンテキストとは、Webページが表示される環境のことをいいます。

上記のコードでは、ブラウジング・コンテキストが入れ子の状態で表示されます。

こちらもobject要素が対応していない場合には、そのページへのリンクがあると親切ですね。

イメージマップを埋め込む

<object data="sample.png" usemap="#map" width="350" height="210">
</object>
<map name="map">
<area href="http://sample01.html" shape="rect" alt="四角形" coords="10,30,70,85">
<area href="http://sample02.html" shape="circle" alt="円形" coords="200,185,79">
<area href="http://sample03.html" shape="poly" alt="多角形" coords="323,48,222,123,309,188,395,155,430,82">
</map>

map要素のname属性の値に#を足したものを、usemap属性に指定すると、イメージマップとの関連付けを行います。

イメージマップの領域は、area要素でそれぞれ指定されます。

ブラウザによって、機能しないことがあるので、その際はimg要素を使いましょう。

a要素を使って、ブラウジング・コンテキストを指定

<ul>
   <li><a href="sample_a.html" target="box1">box1にサンプルAを表示</a></li>
   <li><a href="sample_b.html" target="box1">box1にサンプルBを表示</a></li>
   <li><a href="sample_c.html" target="box1">box1にサンプルCを表示</a></li>
</ul>
<ul>
   <li><a href="sample_a.html" target="box2">box2にサンプルAを表示</a></li>
   <li><a href="sample_b.html" target="box2">box2にサンプルBを表示</a></li>
   <li><a href="sample_c.html" target="box2">box2にサンプルCを表示</a></li>
</ul>
<p><object data="sample_a.html" width="250" height="120" name="box1"></object></p>
<p><object data="sample_a.html" width="250" height="120" name="box2"></object></p>

object要素のname属性は、外部リソースの名前を示します。

これをa要素と組み合わせることで、外部リソースのリンク先を変更することができます。

上記の例では、object要素に「box1」、「box2」と名付けた領域を作成しています。

a要素のtarget属性で、名前と同じ値を使用することで、object要素とa要素を関連付けを行います。

a要素で作られたリンクをクリックすることで、object要素に埋め込まれた表示を切り替えることができます。

まとめ：HTMLのobject要素は対応ブラウザをチェックすることが大事

今回は、HTMLのobject要素について、具体的にサンプルコードを用いて説明しました。

他の要素で代替できるため、使用場面は少ないかもしれませんが、覚えておいて損はないです。

注意点としては、特定のブラウザで表示されない、思い通りに動かない、ということがありますので、調べながら進めていく必要があります。

Webサイトを作る上で、今回の記事が少しでも参考になれば幸いです。