最終更新日 ![]()
画像の表示について指定します。src属性で画像データの場所を指定し、alt属性で画像が表示されないときに代わりとなるテキストを指定します。img要素はコンテンツを持たない空要素で、終了タグはありません。
src属性の指定は必須です。画像データとしては、PNG、GIF、JPEG形式の画像のほか、単一ページのPDF、SVGルート要素を持つXMLファイル、アニメーションPNG、アニメーションGIFなどを利用できます。
イメージマップを作る場合には、img要素のusemap属性でイメージマップ用の画像を指定します。その際には、map要素のname属性で指定したイメージマップ名に「#」を付けて指定します。
また、ユーザーがサーバーサイドのイメージマップへアクセスできるようにするには、href属性を持つa要素内の子要素としてimg要素を記述し、そのimg要素のismap属性を指定します。
img要素は、Embeddedコンテンツの記述箇所で使用できます。
HTML5では、img要素はレイアウト用や、透明な画像の表示用として使うことは推奨されていません。
| カテゴリ | タグの省略 | 親要素 | 子要素 |
|---|---|---|---|
|
Flowコンテンツ Phrasingコンテンツ Embeddedコンテンツ (Interactiveコンテンツ) |
空要素 | Embeddedコンテンツを子にできる要素 | なし |
| 属性 | 値 | 説明 |
|---|---|---|
| alt | 文字列 | 画像の代替テキストを指定します。 |
| src | URL | 読み込む画像のURLを指定します。 |
| usemap | #イメージマップ名 | 画像をイメージマップとして使う場合、map要素のname属性で指定した文字列に「#」を付けて指定します。 |
| ismap | ismap | 論理属性。サーバーサイドのイメージマップへアクセスさせる場合に指定します。 |
| width | 数値 | 画像の表示幅をパーセントまたはピクセルで指定します。 |
| height | 数値 | 画像の表示の高さをパーセントまたはピクセルで指定します。 |
| グローバル属性 | - | - |
| イベント属性 | - | - |
<body> <p><img src="hamburger.jpg" width="300" height="200" alt="ハンバーガー"></p> </body>