【HTML5】img要素(タグ)の使用方法

      2016/08/15

HTML5のimg要素(タグ)の使用方法についてのメモ。

img要素(タグ)の使用方法

alt属性

画像の代替となるテキストを指定する。
画像がロードできないときに表示される。
テキストと同じ情報量になるように指定しないといけない。
基本的に省略は禁止。ただし、記号や装飾目的での使用の場合は、alt="" と指定する。

title属性

マウスポイントを合わせた時に表示されるテキスト

figure要素とfigcaption要素

figcaption属性は、ページに表示される形で画像のタイトルを表示させておきたい場合に指定する。
figureは、figcaption要素とimg要素をグループ化する。

使用例

		
		<figure>
		    <figcaption>女性</figcaption>
		    <img src="img_sample1.png" alt="女性">
		</figure>
女性
女性

width属性とheight属性

画像の幅と高さのサイズを指定できる。
HTML5では『CSSピクセルの数値のみ』指定可能で、%などの単位を付けた指定は禁止となった。

高精細ディスプレイで画像を綺麗に見せるために値は、画像自体のピクセル数の半分程度にして密度を上げるとよい。
たとえば画像が100px×100pxであれば、width="50"、height="50" のように指定する。

 - HTML , , ,