基礎10. img要素-画像を表示させる

src属性

画像の場所を相対パスまたは、絶対パスで指定します。必須属性ですので省略できません。相対パスと絶対パスは、11章で詳しく解説します。

width属性、height属性

必須属性ではありませんが、記述すると画像の多いページでは、表示が多少早くなります。値の単位は、px指定の場合は単位をつけません。相対値の%の場合は単位をつけます。%は親要素の幅からの相対値です。画像本来のサイズからの相対値ではありません。

alt属性

代替テキストを記述する属性。代替テキストとは画像の説明文です。画像が表示できない通信状態の時に、画像の変わりにテキストが表示されます。また音声ブラウザの場合は、読み上げのテキストになります。alt属性は必須属性です。ただし値を入れるか、入れないかは任意です。これは矢印やアイコンなど説明が必要ない画像もあるからです。先ほどのコードのalt属性の値を省略した場合は下記になります。

<p><img loading="lazy" src="flower01.jpg" alt="" width="400" height="266"></p>