HTMLで画像を表示させる

HTMLで画像を表示させる時には、imgタグを使います。imgタグは、閉じタグのいらないです。一般的に、imgタグは2つの属性が必要です。一つは、実際に表示させる画像へのパス。もう一つは、画像が表示されなかったり、視覚障害をお持ちの方向けの、画像の説明分です。
それ以外にも、画像の横幅と高さを記述する属性もあります。

imgタグの書き方

imgタグは、閉じタグは必要ありません。ただこのままでは、何の画像を出力していいかわからないので、出力したい画像のパスを、src属性で記述します。パスに関して詳しい記述は前の記事をみてください。

これで、ブラウザ上に画像が表示されます。
ただ、このままだと、画像がネットワークのエラーなどで表示されなかった場合や、視覚障害をお持ちの方は、何の画像が表示されているか分かりません。
そこで、imgタグには、画像の説明である、alt属性を入れることになっています。

こうすることで、画像が見えなくても、何の画像なのかが分かります。
ただし、説明のしようがない、矢印などの装飾を目的とした画像は空にしていいことになっています。
その場合でも、alt属性自体は必要です。

横幅と高さの書き方

imgタグには、width属性とheight属性を使って、画像の高さと横幅を指定することができます。こちらは任意となります。

横幅と高さを入れた時のメリットは、もし画像が表示されない時でも、その分の大きさをブラウザ上で確保してくれるので、レイアウトが崩れにくくなります。
横幅と高さを入れない場合は、画像を差し替えたり、レスポンシブで横幅に合わせて画像を縮小したりする場合に向いています。
最近では、レスポンシブでサイトを作ることが多いので、入れない場合も多いです。

スクリーンショット 2015-05-01 10.03.32

まとめ

画像を表示させるには、imgタグを使います。その際、画像のパスと説明文は必ず書くようにしましょう。