HTMLでimgタグを使って画像を表示する方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLでimgタグを使って画像を表示する方法について、画像の表示と幅と高さの指定、代替テキストの指定に分け、簡単に解説していきます。

画像を表示

画像を表示するにはimgタグを使います。

imgタグではsrc属性に画像のURIを指定すると対象の画像が表示されます。

<img src="../img/hoge.jpg">

上記のコードでは、相対パスで画像のURIを指定し、hoge.jpgを表示しています。

幅と高さを指定

imgタグでは幅と高さを指定することが可能です。

imgタグのwidth属性では幅を、height属性では高さを指定することができます。

<img src="../img/hoge.jpg" width="300" height="200">

上記のコードでは、hoge.jpgの画像を、幅300ピクセル、高さ200ピクセルで表示しています。

代替テキストを指定

imgタグでは、画像を表示できない場合に代替テキストを表示できます。

imgタグのalt属性にテキストを指定することで、画像表示ができない場合に備えられます。

<img src="../img/hoge.jpg" alt="ほげの写真です。">

上記のコードでは、hoge.jpgの画像を表示し、万一表示できない場合には”ほげの写真です。”というテキストが画像の代わりに表示されます。