HTML5における<object>タグの使い方

<object>タグは、外部コンテンツをHTMLに組み込むための要素です。今回は、HTML5における<object>タグの使い方をご紹介します。

HTML5における<object>タグの使い方

<object>タグは非常に凡庸性の高い要素で、どのような外部コンテンツでも、ほぼ<object>タグで埋め込んでしまうことが出来ます。例えば、画像を埋め込む時は<img>、音声を読み込む時は<audio>を使用するなど、埋め込むものによってタグ要素を使い分けていたと思いますが、この<object>要素だけで様々なコンテンツを埋め込むことが可能です。

<object>〜</object>

プラグインを使うデータを埋め込む場合は、<object>要素の最初の部分に<param>要素を併用して、パラメータを指定します。

何故、画像を表示させたい時に<img>要素があるのに、<object>要素を使う必要があるのかというと、<object>要素は、<object>〜</object>内に自由に代替コンテンツを用意することが出来ます。逆に、代替コンテンツがない際には、専用のタグを使用した方がふさわしいということです。

具体的に言うと、画像やHTML文書を埋め込む場合は、代替コンテンツを必ずしも必要としない限り通常通り<img>要素や<iframe>要素を使用したほうが良いでしょう。一方で、<embed>要素や<video>要素、<audio>要素などで動画や音声を埋め込む場合は、<object>要素を利用すると、「代替コンテンツを配置できる」というメリットがあったり、より多くの形式を埋め込むことが可能になります。

組み込みたいファイルのURLを指定する場合はdate属性を、ファイルのMIMEタイプを指定する場合はtype属性を使用しますが、date属性かtype属性は、どちらか1つが必ず必須となります。サイズなども多くの場合指定すると思うので、以下の記述が基本形になります。

<object data="埋め込むコンテンツのURL" type="MIMEタイプ" width="横幅" height="縦幅">
  代替コンテンツ
</object>

なお、HTML5では、<align>属性、<archive>属性、<border>属性、<classid>属性、<codebase>属性、<codetype>属性、<declare>属性、<hspace>属性、<standby>属性、<vspace>属性が使用できなくなっていますが、新しく<object>要素と<form>要素を関連付ける際に<form>属性が使用できるようになっています。


イベント

2017/12/05(火)
Design Thinking Square