HTML5における＜img＞タグの使い方

<img>タグは、画像を表示する際に使用します。今回はHTML5における<img>タグの使い方をご紹介します。

HTML5における<img>タグの使い方

以下のコードが基本的な記述になります。通常は終了タグは必要ありません。src属性で画像のURLを指定します。src属性は、<img>要素では必須タグとなっているので、必ず記述して使用します。

特にサイズを指定しない場合、画像の実際の大きさで表示されます。

次に属性を使用することで指定できるものをご紹介いたします。

width/height属性

大きさを指定したい場合は、以下のようにwidth属性とheight属性を使用して指定します。

alt属性

alt属性を使用することで、画像を閲覧できなかったユーザー向けのテキストを指定しておくことができます。

画像が表示されない場合に、その箇所にどのような画像が表示されているのかわかることで、画像が表示されなくてもコンテンツの意味がわからなくなってしまうことを防ぐことができます。

コード例はtitle属性と合わせてご紹介します。

title属性

title属性を指定すると、　title属性の値が画像のキャプションになります。

以下がサンプルコードです。

基本的な<img>タグの使い方は以上になります。