img 要素は、画像を表示する際に使用します。 必須属性のsrc属性で画像ファイルのURLを指定します。
一般的なブラウザで表示できる画像フォーマットとしては、PNG、GIF、JPEGがよく利用されています。他にも、ウェブ用のベクター画像フォーマットである SVG や、単一ページのPDFなどを src 属性の値として指定できます。
alt 属性は、単に画像のタイトルを入れるのではなく、その画像が表すものを文章として説明する必要があります。例えば、文章中に画像が埋め込まれた場合、画像を取り除いて本文と代替テキストだけを残した場合でも、その文章が問題なくつながるような内容とすることが求められています。
また、画像全体ではなく一部をクリックしたときに他の文書にリンクしたり、Javascriptを実行したい場合には、usemap 属性で map 要素の name を指定します。
画像を表示する。終了タグはない。
| 属性名 | 属性値 | 説明 | 必須 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| src | URI | 埋め込む画像の URI | ○ | ||||||||||||
| alt | 代替テキスト | 画像を表示しない場合などの、画像を説明するための文章 | × | ||||||||||||
| width | ピクセル数 | 画像の幅 | × | ||||||||||||
| height | ピクセル数 | 画像の高さ | × | ||||||||||||
| usemap | name 属性値 | イメージマップの名称（# を忘れないこと） | × | ||||||||||||
| ismap | 論理値 | サーバー側イメージマップとして扱う場合に指定 | × | ||||||||||||
| srcset | 画像URL 記述子 | 画像の URL と記述子のセット（コンマ区切りで複数記述できる） 記述子は次のいずれか
| × | ||||||||||||
| sizes | 表示幅 | 表示する条件とそのときに表示する画像の横幅（コンマ区切りでで複数記述できる）
| × | ||||||||||||
src 属性に表示したい画像の URI を指定します。
画像を base64 にエンコード（変換）して直接HTMLファイルに埋め込むこともできます。src 属性の ","以降の文字列が base64 にエンコードされた画像のデータです。こうすることで、別に画像ファイルを読み込むことがなくなり表示速度が速くなります。ただし、エンコードすることで src 属性に記述される文字列が多くなり HTML ファイルの読み込みが遅くなることもあります。アイコンなどの小さい画像だけにすべきでしょう。
ちなみに下の例の画像は base64 にエンコードすると 12512文字になります（記述例では省略してあります）。
<img src="bear.png" title="ファイルを読み込んだ熊の絵"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA ... AAAAASUVORK5CYII=" title="base64でエンコードした熊の絵">
width 属性では表示される幅、height 属性では表示される高さを指定します。表示する画像の大きさではありません。
<img src="bear.png" alt="オリジナルの大きさそのままの熊の絵" title="普通"> <img src="bear.png" width="74" height="111" alt="縦に1.5倍に引き伸ばした熊の絵" title="のっぽ"> <img src="bear.png" width="111" height="74" alt="横に1.5倍に引き伸ばした熊の絵" title="ぽっちゃり">
width や height を記述しなければ画像そのままの大きさで、指定すればその大きさで表示されます。
また、ismap を指定すると、サーバー側イメージマップとなり、クリックした座標（x,y）が、URLのクエリ文字列としてサーバーに送信されるようになります。
左の例は、熊の絵をクリックしてもパラメーターは送られませんが、右の例ではクリックした座標がサーバーに送られます。
ismap がない例<a href="bear.htm"><img src="bear.png" title="くま"></a> |
ismap がある例<a href="bear.htm"><img src="bear.png" title="くま" ismap></a> |
|
表示例
|
表示例
|
srcset 属性とは、HTML5.1から追加された属性で、サイズ違いの画像を条件によって切り替える機能です。
srcset 属性では、表示したい画像の候補を複数記述しても、実際に読み込まれる画像は適切な1枚のみであって、表示しないその他の候補画像を無駄にロードしません。
画像の候補には、画像ファイルの横幅（ w ）またはデバイスピクセル比（ x ）のどちらかを指定することができます。1つ目はビューポート（ブラウザの表示領域）の幅に応じて画像を切り替える指定、2つ目はデバイスのピクセル比に応じて画像を切り替える指定です。
次の例では、bear-500.png は 500px、bear-600.png は 600px、bear-700.png は 700px であるという情報をブラウザに伝えています。そして、ブラウザの幅が 500px 以下ならば bear-500.png、600px 以下ならば bear-600.png、600px より大きければ bear-700.png が表示されます。
また、のような srcset 属性をサポートしていないブラウザ用に src 属性も合わせて記述します。ただし、srcset 属性の後に記述する必要があります。なお、srcset 属性の画像が表示された場合には、src 属性は無視されます。
<img srcset="bear-500.png 500w, bear-600.png 600w, bear-700.png 700w"
src="bear.png" title="クマ">
別ウィンドウで表示し、ウィンドウの横幅を変えてみてください。横幅の大きさによって画像が変わります。ただし、などは、一度大きなサイズの画像が表示されてしますと、それ以降はその画像しか表示されなくなってしまいます。その場合は、ウィンドウの横幅を小さくした状態で、キャッシュされた画像を消去して、再表示してみてください。
は、大きなサイズの画像が表示されても再読み込みすれば小さなサイズの画像が表示されるようになります。
スマートフォン、タブレット、ＰＣなどデバイスによって表示サイズが異なります。いろいろなデバイスの表示サイズにあわせて最適な画像を表示する仕組みです。
sizes 属性は、表示する画像のサイズ（横幅）とその条件を指定します。割合で指定する場合は % ではなく vw、vh、vmin、vmax 単位を使います。長さで指定する場合は em、rem、px、cm、pt などが使用できます。（長さの単位 を参照してください）
また、sizes 属性は srcset 属性がある場合のみ記述でき、srcset 属性にはセットされる全ての画像候補に画像ファイルの幅（w の単位）を指定しておく必要があります
次の例では、表示サイズが 500px 以下ならば350pxで、500px～700px の間ならは幅 70%で、それ以上ならば 490px で表示されます。
<img srcset="bear-700.png 700w"
sizes="(max-width:500px) 350px, (max-width:700px) 70vw, 490px"
src="bear.png" title="クマ">
別ウィンドウで表示し、ウィンドウの横幅を変えてみてください。横幅の大きさによって画像が変わります。
map 要素は、area 要素で定義されたクライアントサイド・イメージマップを参照できるように名前を定義します。
map 要素内の area 要素で、クリックできる領域の形やリンク先を定義し、img 要素の usemap 属性で使用する map 要素の name 属性を指定します。
イメージマップとは、クリック可能なリンク領域を持つ画像のことで、それをサーバーではなくブラウザ側で処理するのでクライアントサイド・イメージマップといいます。
定義されたクライアントサイド・イメージマップを参照できるように名前を定義する。
実際の定義は、要素内に配置された area 要素で行う。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| name | 文字列 | イメージマップの名称（img 要素の usemap 属性で指定される名前）
注意：id 属性と同時に指定する場合は同じ名前にする必要がある。 | × |
<img src="map.png" usemap="#disk"><br> <map name="disk"> <area shape="circle" coords="250,100,50" href="circle.htm" title="丸"> </map>
実行例は、次の area 要素を参照してください。
area 要素は、イメージマップのクリックできる領域の形やリンク先を定義します。この要素は、map 要素内で使用します。
領域の形は、shape 属性と coords 属性で決定し、リンク先は href 属性で指定します。href 属性を記述しなければ、クリックしてもどこにもリンクしない領域になります。
イメージマップとは、クリック可能なリンク領域を持つ画像のことで、それをサーバーではなくブラウザ側で処理するのでクライアントサイド・イメージマップといいます。
イメージマップのクリックできる領域の形やリンク先を定義する。
なお、領域が重なっていた場合は先に指定したほうが優先される。また、クリックしてもどこにもリンクしない領域にしたい場合は、href 属性を記述しない。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| shape | 領域の形状 | × | |
| rect | 四角形（規定値） | ||
| circle | 円形 | ||
| poly | 多角形 | ||
| default | 画像全体（他の属性より後に指定する必要がある） | ||
| coords | 座標（x,y）等 | × | |
| x1,y1,x2,y2 | 四角形のとき、左上(x1,y1)と右下(x2,y2)の角の座標 | ||
| x,y,r | 円形のとき、中心(x,y)の座標と半径(r) | ||
| x1,y1,x2,y2,x3,y3 ... | 多角形のとき、すべての頂点(x1,y1 など)の座標 | ||
| x1,y1,x2,y2 | 画像全体のとき、左上(x1,y1)と右下(x2,y2)の角の座標（ や のときは必要） | ||
| href | URI | リンク先のURI（記述しなければどこにもリンクしない） | × |
| alt | 代替テキスト | マップが表示できない場合に説明する文章 | × |
| hreflang | 記述言語 言語コード一覧 | リンク先の文書を記述している言語 | href がない場合は指定できない |
| type | MIME タイプ MIME タイプ一覧 | リンク先の MIME タイプ | |
| rel | 関係性 リンクタイプ一覧 | 外部ファイルとの関係性 | |
| media | メディア メディアタイプ一覧 | 対象とするメディア | |
| target | リンク先の内容を表示するウィンドウ(フレーム) | ||
| _blank | 新規のウィンドウに表示 | ||
| _self | 現在のウィンドウ（フレーム）に表示 | ||
| _parent | 親ウィンドウ（フレーム）に表示 | ||
| _top | ウィンドウ全体に表示 | ||
| 名称 | 指定のウィンドウ（フレーム）に表示 | ||
<p><img src="map.png" alt="クリッカブルマップのためのサンプル図形" usemap="#example"></p> <map name="example"> <area shape="rect" coords="50,50,150,150" href="rect.htm" title="四角"> <area shape="circle" coords="250,100,50" href="circle.htm" title="円"> <area shape="poly" coords="400,50,450,150,350,150" href="poly.htm" title="三角"> <area shape="default" coords="0,0,500,200" href="default.htm" title="その他"> </map>
figure 要素は、本文から参照される図版（挿絵、図表、写真、ソースコード、等）を表します。
本文とは独立した単位として記述します。つまり、本文と関連しつつも、削除・移動しても本文の内容に影響がないブロックに対して使用します。
キャプション（タイトルや説明）を付けたい場合は、figure 要素内に figcaption 要素を配置します。
本文から参照される図版（挿絵、図表、写真、ソースコード、等）を表す。
多くのブラウザでは、上下に 1em、左右に 40px 程度のマージンが入る。
<figure style="float:right;"> <img src="bear.png" alt="くまの絵" title="くま"> </figure> <p>クマ科に属する哺乳類の総称。体はよく肥え、がんじょうで、毛はあらく、毛色は褐色、黒色、白色など種類によって異なる。体長は最大種ホッキョクグマで約三メートル。四肢は太くて短く、強大なかぎ爪を備える。尾は短い。臭覚が優れ、雑食性で魚、小獣、木の実、草などを食べる。冬は穴の中で絶食して過ごすことが多い。肉は食用、毛皮は敷物、胆嚢は「くまのい」といって薬にする。北極地方から熱帯林まで分布し、ホッキョクグマ・マレーグマなど七種がいる。日本には本州以南に、黒色でのどの下に三日月形の白斑のあるツキノワグマが、北海道には大形のヒグマがすむ。</p>
この例では、スタイルシートで figure 要素を右に寄せて配置しています。
figcaption 要素は、figure 要素のキャプション（タイトルや説明）を表します。
figure 要素内に１つだけ配置することができます。
figure 要素のキャプション（タイトルや説明）を表す。
figure 要素に１つだけ配置することができる。
<figure> <figcaption>くま（熊）</figcaption> <img src="bear.png" title="くま"> </figure> |
<figure> <img src="bear.png" title="くま"> <figcaption>くま（熊）</figcaption> </figure> |
|
キャプションが上にある例
表示例
|
キャプションが下にある例
表示例
|
レスポンシブイメージを実現するための要素で、img 要素で表示する画像の代わりに、ブラウザの横幅などの条件に従い、他の画像を指定する source 要素をグルーピングするために用いられます。
レスポンシブイメージとは、HTML 5.1 で定められた仕様で、スマートフォン、タブレット、ノートパソコン、デスクトップパソコン等、いろいろなデバイス幅・解像度に適した画像を表示する仕組みです。主な特徴は次の通りです。
0個以上の source 要素と一つの img 要素を含み、様々な画面や端末の条件に応じた画像を提供する。
source 要素の type 属性や media 属性に適合するすれば、その source 要素の srcset 属性で指定された画像が表示される。適合しなければ、その source 要素はスキップされ、次の source 要素が検査される。
画像ファイルの URL や種類を指定する。
type 属性を指定すれば、ブラウザがメディアファイルを取得する前に表示可能かどうかを判断することができます。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| srcset | 画像URL 幅 密度 | 画像のセット（コンマ区切りで並べたリスト）（規定値：幅 無限大、密度 1） | ○ |
| sizes | 条件 長さ | 表示する画像の横幅（コンマ区切りで並べたリスト） | × |
| type | MIME タイプ | メディアファイルの MIME タイプやコーデック type='MIMEタイプ; codecs="コーデック名"' MIMEタイプ一覧 | × |
| media | メディア | 対象とするメディア（規定値：all） メディアタイプ一覧 | × |
type の引用符の記述は例の通り外側がシングルクォーテーション（'）で、内側がダブルクォーテーション（"）です。
横幅が 400px より小さいときは bear1.png が、 500px より小さいときは bear2.png が、それより大きいときは bear3.png が表示されます。
ブラウザの幅を変えてみてください。
<picture> <source media="(min-width: 500px)" srcset="bear3.png"> <source media="(min-width: 400px)" srcset="bear2.png"> <img src="bear1.png" alt="くま"> </picture>
<video>タグは、動画を再生する際に使用します。<video>タグを使用することで、Flash などのプラグインをインストールすることなく、標準の HTML からシンプルに動画を扱えるようになります。
ただし、ブラウザによってサポートされている動画規格が異なり、ブラウザ間で統一されていません。 どの動画規格が HTML5 にふさわしいかについての検討はされていますが、推奨される標準規格は現時点では未定のままです。
また、<video>～</video> の中に、動画を再生できなかった場合の代替要素を記述することができます。
| 形式 | 拡張子 | MIME | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| MP4 （H.264 + AAC） | mp4 | video/mp4 | ○ | ○ | ○ | ○ | ○ | ○ | ○ | × |
| WebM （VP8 + Vorbis） | webm | video/webm | × | ○ | ○ | ○ | ○ | ○ | ○ | × |
| Ogg （Theora + Vorbis） | ogv | video/ogg | × | ○ | ○ | ○ | ○ | ○ | ○ | × |
動画を表示する。動画は src 属性で指定するか、<video> ～ </video> 内に記述した <source> 要素で指定する。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| src | URI | 埋め込む動画の URI | × （省略した場合は <source> 要素必須） |
| autoplay | なし | 自動再生 | × |
| preload | 先読み | × | |
| auto | ウェブページを読み込んだ時点で動画を裏側で読み込む（規定値） | ||
| metadata | 動画のサイズ・最初のフレーム・トラックリスト・再生時間などの動画のメタデータのみを取得する | ||
| none | ウェブページを読み込んだ時点では動画を読み込まない | ||
| controls | なし | 動画再生を利用しやすくするユーザインターフェースを表示する | × |
| muted | なし | 音声を出さずに再生 | × |
| poster | URI | 表示できる動画が無い場合のメッセージや動画の内容を知らせるヒントなどを表示させる画像ファイルの URI | × |
| loop | なし | ループ再生 | × |
| width | ピクセル数 | 表示の幅 | × |
| height | ピクセル数 | 表示の高さ | × |
例えば、再生・一時停止・再生位置の移動・ボリュームなどのユーザインターフェースを表示するには次のようにします。
<video controls src="criticalCat.mp4" poster="start.png" width="320" height="240"> </video> <video src="notExist.mp4" autoplay poster="JollyRoger.png" width="320" height="240"> </video>
poster は動画が読み込まれるまで表示される画像を指定します。
左は、動画が再生されるまで再生ボタンのある画像が表示されます。この画面かユーザインターフェースの再生ボタンをクリックすると再生が始まるようにしています。右は動画が存在していませんので、どくろのマークが表示され続けます。
なお、ユーザインターフェースが表示されていない場合は、マウスを重ねると表示されます。
preload は動画をあらかじめ読み込むかどうかを指定します。デフォルトの値は auto なのでウェブページを読み込んだ時点で動画もあらかじめ読み込まれます。ウェブサーバに余分な負担を掛けたくない場合には、none を指定すると良いでしょう。
<video controls src="criticalCat.mp4" preload="auto" width="320" height="240"></video> <video controls src="criticalCat.mp4" preload="metadata" width="320" height="240"></video> <video controls src="criticalCat.mp4" preload="none" width="320" height="240"></video>
次の例では、再生時間（duration）と バッファされたメディアデータの範囲（buffered.start(0)～buffered.end(0)）も表示しています。
|
preload='auto' |
preload='metadata' |
preload='none' |
|
メタデータ:未読 メディアデータ:未読 |
メタデータ:未読 メディアデータ:未読 |
メタデータ:未読 メディアデータ:未読 |
では、preload='metadata' でも、動画ファイルが小さいためかすべて読み込まれるようです（まれに途中までのこともあります）。
動画の URL は、<video> の src 属性で指定しますが、選択可能なリソースを複数指定するには <source> で記述します。
source 要素を使うと、再生用のファイルを複数指定できるようになり、ブラウザは複数の選択肢から、再生対象のファイルを選択することができるようになります。ブラウザは、記述順にファイルをチェックし、再生可能なファイル形式が見つかるとその時点でファイルを再生します。
<video controls width="320" height="240"> <source src="criticalCat.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="criticalCat.webm" type='video/webm; codecs="vp8,vorbis"'> <source src="criticalCat.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> </video>
では、WebM や Ogg は再生できませんので criticalCat.mp4 が再生されます。
では、Ogg が再生できますので、criticalCat.ogv が再生されます。
ブラウザによって video 要素で再生できる種類が異なります。
| mp4 | webm | ogv |
|---|---|---|
track 要素を使用すると、動画/音声ファイルに字幕やキャプション、スクリーン リーダーのテキスト、チャプターを簡単に、標準化された方法で追加することができます。
ひとつの video 要素に複数の track 要素を付加すると、[cc] ボタンをクリックしたときに表示された、 label 属性で指定した名前によって切り替えることができます。
注意
track 要素で使用するテキストトラックファイルを有効にするためには、拡張子（vtt）を Web サーバーの MIME（text/vtt）に登録する必要があります。
動画/音声ファイルに字幕やキャプション、スクリーン リーダーのテキスト、チャプターを追加する。
| 属性名 | 属性値 | 説明 | 必須 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| src | URI | テキストトラックファイル（拡張子 vtt）(注)の URI | ○ | ||||||||||||
| kind | キーワード | テキストトラックの種類
| × | ||||||||||||
| srclang | 言語コード | テキストトラックデータの言語（規定値：ja） 言語コード一覧 | × | ||||||||||||
| label | 文字列 | 複数トラックを区別するための名前 | × | ||||||||||||
| default | URI | 複数トラックのときのデフォルトトラック | ○（複数トラック） |
（注）テキストトラックファイルは、WebVTTというファイルフォーマット（拡張子 vtt）で作成します。
ただし、テキストトラックファイルを有効にするためには、拡張子（vtt）を Web サーバーの MIME（text/vtt）に登録する必要があります。
WebVTT は、プレーンテキストのファイル（文字エンコードは UTF-8）
WebVTT 一行目は必ず WebVTT 開始時刻 --> 終了時刻 [表示位置] 時刻の形式は、hh:mm:ss.sss（hh: は省略可） 表示テキスト 表示文字列（複数行可、タグも記述できるがブラウザによる） 表示テキスト 空行が表示文字列の終了（必須） 開始時刻 --> 終了時刻 [表示位置] 表示位置（省略可、以下参照） 表示テキスト
表示位置の形式 キーワード:値 （規定値:画面下部分の中央）
| キーワード | 値 | 意味 |
|---|---|---|
| line | 数値% | 上下の位置 |
| position | 数値% | 左右の位置 |
| align | start end | 文字揃えの基準位置 左揃え 右揃え |
<video controls width="320" height="200"> <source src="criticalCat.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="criticalCat.webm" type='video/webm; codecs="vp8,vorbis"'> <source src="criticalCat.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <track label="説明" src="criticalCat.vtt" kind="subtitles" srclang="ja" default> </video>
WEBVTT 00:00:00.200 --> 00:00:01.000 おっ！ネコだ 00:00:03.500 --> 00:00:04.500 line:20% <b>ジャンプ！！</b> 00:00:04.600 --> 00:00:05.000 line:50% position:70% align:end <span style="font-size:200%;">ア゛゛ーーッ</span>
スタイルシートは有効ではないようです。また、 では、タグや表示位置は無視されているようです。
<audio>タグは、音声を再生する際に使用します。
また、<audio>～</audio> の中に、音声を再生できなかった場合の代替要素を記述することができます。
| 形式 | 拡張子 | MIME | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| MP3 | mp3 | audio/mp3 | ○ | ○ | ○ | ○ | ○ | ○ | ○ | × |
| Ogg | ogg | audio/ogg | × | × | ○ | ○ | ○ | ○ | ○ | × |
| AAC | m4a | audio/aac | ○ | ○ | ○ | ○ | ○ | ○ | ○ | × |
音声を再生する。音声ファイルは src 属性で指定するか、<audio> ～ </audio> 内に記述した <source> 要素で指定する。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| src | URI | 埋め込む音声ファイルの URI | × （省略した場合は <source> 要素必須） |
| autoplay | なし | 自動再生 | × |
| preload | 先読み | × | |
| auto | ウェブページを読み込んだ時点で音声を裏側で読み込む（規定値） | ||
| metadata | 再生時間などの音声のメタデータのみを取得する | ||
| none | ウェブページを読み込んだ時点では音声を読み込まない | ||
| controls | なし | 音声再生を利用しやすくするユーザインターフェースを表示する | × |
| muted | なし | 音声を出さずに再生 | × |
| poster | URI | ユーザー環境で利用できる音声が無い場合に表示させる画像ファイルの URI | × |
| loop | なし | ループ再生 | × |
例えば、ユーザインターフェースを表示するには次のようにします。
<audio controls src="goodMorning.mp3"> </audio>
音声の URL は、<audio> の src 属性で指定しますが、選択可能なリソースを複数指定するには <source> で記述します。
音声ファイルの URL や種類を指定する。
type 属性を指定すれば、ブラウザがメディアファイルを取得する前に再生可能かどうかを判断することができる。
終了タグはない。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| src | URI | 埋め込む音声の URI | ○ |
| type | MIME タイプ | メディアファイルの MIME タイプやコーデック type='MIMEタイプ; codecs="コーデック名"' MIMEタイプ一覧 | × |
| media | メディア | 対象とするメディア（規定値：all） メディアタイプ一覧 | × |
type の引用符の記述は例の通り外側がシングルクォーテーション（'）で、内側がダブルクォーテーション（"）です。
source 要素を使うと、再生用のファイルを複数指定できるようになり、ブラウザは複数の選択肢から、再生対象のファイルを選択することができるようになります。ブラウザは、記述順にファイルをチェックし、再生可能なファイル形式が見つかるとその時点でファイルを再生します。
<audio controls> <source src="goodMorning.ogg" type='audio/ogg'> <source src="goodMorning.m4a" type='audio/aac'> <source src="goodMorning.mp3" type='audio/mp3'> </audio>
s や では、Ogg を再生できませんので goodMorning.m4a が再生されます。
ブラウザによって audio 要素で再生できる種類が異なります。
| mp3 | |
|---|---|
| ogg | |
| aac |
<embed>タグは、外部のアプリケーションやインタラクティブコンテンツを文書内に埋め込む際に使用します。
プラグインがインストールされていなかったり、プラグインのバージョンが異なっていたりすると、再生できなかったり、再生方法が異なっていたりします。プラグインがインストールされていないと、そのページを表示する度にインストールするかかどうかを確認するダイアログが表示されることもあります。
また、<embed>～</embedo> の中に、コンテンツを埋め込めなかった場合の代替要素を記述することができます。
コンテンツを埋め込む。コンテンツの URL は src 属性で指定する。
終了タグはない。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| src | URI | 埋め込むコンテンツファイルの URI | ○ |
| type | MIME タイプ | コンテンツの MIME タイプ MIMEタイプ一覧 | × |
| width | ピクセル数 | コンテンツの幅 | × |
| height | ピクセル数 | コンテンツの高さ | × |
| その他 | プラグインへのパラメータとして使用される | × |
video 要素で再生できない動画や Flash などのプラグインを必要とするデータを HTML 文書に埋め込みます。
<embed src="criticalCat.swf" type="application/x-shockwave-flash" width="200" height="160" menu="true" loop="false"> <embed src="criticalCat.mov" type="video/quicktime" width="200" height="160"> <embed src="criticalCat.wmv" type="video/x-ms-wmv" width="200" height="160">
再生できるかどうかは、ブラウザの種類やプラグインのインストール状況によります。
| Flash | quicktime | Windows Media Player |
|---|---|---|
<object>タグは、画像やプラグイン、インラインフレームなどの外部マルチメディアリソースなどを文書内に埋め込む際に使用します。詳細のパラメータ制御には <param> を用います。
ただし、<object> の動作は、ブラウザやそのバージョン、インストールされているプラグインの種類などによって動作が大きく異なります。
また、<object>～</object> の中に、リソースなどを埋め込めなかった場合の代替要素を記述することができます。
多くの場合他の要素に置き換えることができます。
<object data="figures/bear.png" type="image/png" typemustmatch width="74" height="74"></object> <object data="figures/bear.png" type="text/plain" typemustmatch width="74" height="74"></object> <object data="figures/bear.png" type="text/plain" width="74" height="74"></object>
左側はリソースとMIME タイプが一致しています。中央は一致していなくて、typemustmatch が指定されています。右側も一致していませんが、typemustmatch は指定されていません。
|
image/png |
text/plain typemustmatch |
text/plain |
次の例は Flash ファイル（.swf） を再生しようとしていますが、再生できなければ MP4 を再生するようにしています。
ただし、Safari は <video> をサポートしていませんので、次の例のように記述すると <object> 自体が表示されません。
（なお、実際にはこの Flash ファイルは繰り返し再生されますが、パラメータで繰り返さないように指定しています。）
<object data="criticalCat.swf" type="application/x-shockwave-flash" width="200" height="160"> <video controls src="criticalCat.mp4" width="160" height="120"></video> </object>
<object> 要素でプラグインデータを埋め込んだ場合に、呼び出されるプラグインのパラメータを指定するには、<param> 要素を使用します。ただし、<param> 要素は、<object> 要素に続けて記述する必要があります。
パラメータを指定する。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| name | 文字列 | パラメータの名前 | ○ |
| value | 文字列 | パラメータの値 | ○ |
loop 属性を param 要素で指定しています。なお、Flash を再生できない環境では MP4 を再生します。
ただし、Safari は <video> をサポートしていませんので、次の例のように記述すると <object> 自体が表示されません。
<object data="criticalCat.swf" type="application/x-shockwave-flash" width="200" height="160"> <param name="loop" value="false"> <video controls src="criticalCat.mp4" width="160" height="120"></video> </object>