最終更新日

img要素

画像の表示について指定します。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要素はレイアウト用や、透明な画像の表示用として使うことは推奨されていません。

HTML5での変更点
・align、hspace、vspace、border、longdesc、lowsrc、name、datasrc、datafldの各属性は廃止されました。
カテゴリ タグの省略 親要素 子要素
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>
参考文献:W3C HTML5「4.8.1 The img element」外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。