<IMG> は画像(image)を表示するHTMLタグです。IMG要素タイプはインライン要素です。
HTMLにおいて、タグおよび属性の名前はの大文字と小文字を区別しない。img要素の終了タグは省略できる。
<IMG></IMG>
<img></img>
<IMG>
<img>
XHTMLにおいて、タグおよび属性の名前は小文字で記述する。img要素の終了タグは省略できるが、XMLの規則に従う必要がある。
<img></img>
<img />
次に示す属性をimg要素に指定することができる。
<img src="img.jpg" class="responsive rounded">
<img src="img.png" style="height: 250px; width: 300px;">
属性値 | 意味 |
---|---|
right | 右端に表示 |
left | 左端に表示 |
<a href="
URI
">
と
</a>
で囲んで、画像をクリックすると他のページにジャンプするように設定すると、画像の周りに枠線が表示されるようになる。このとき、画像の周りに枠線を表示させたくない場合は、
border="0"
と明示的に指定すれば枠線が表示されなくなる。
属性値 | 意味 |
---|---|
true | 表示する(規定値) |
yes | |
false | 表示しない |
no |
galleryimg属性はW3C標準仕様ではなく、Internet Explorer 6で独自拡張された属性である。IE6では<meta>タグで一括して指定することもできる。
Internet Explorer 7でgalleryimg属性は廃止された。
W3C標準仕様ではない独自拡張属性だが、多くのWebブラウザでサポートされている。
フローコンテンツ、フレージングコンテンツ、エンベデッドコンテンツ、インタラクティブコンテンツ
IMGタグのサンプルを示す。
<img src="/img/avator.jpg">
高さ又は幅のどちらか片方だけを指定した場合、アスペクト比が維持されたまま拡大又は縮小される。
<img src="/img/avator.jpg" style="width: 200px;">
高さと幅の両方を指定した場合、指定した大きさで表示される。このときアスペクト比は維持されない。
<img src="/img/avator.jpg" style="height: 200px; width: 300px;">
JavaScriptからはHTMLImageElementインタフェースを通じてimg要素へアクセスできる。
HTMLImageElementインタフェースのプロパティ一覧を次に示す。
AMP (Accelerated Mobile Pages) では <img>
の代わりに <amp-img>
を使う。
Web Hypertext Application Technology Working Group (2022) "Embedded content" HTML Living Standard