
imgタグとは
imgタグとは、「image」の略でブラウザに画像を表示するために用意されたHTMLのタグです。
画像を指定するには、imgタグにsrc属性を使ってURLやファイルのパスを記述します。
imgタグを使用する際は、src属性と同時にalt属性も使用されることが多いです。
alt属性は、画像が表示できないブラウザなどで画像の代わりに代替えテキストを指定するための属性です。
以前のHTML4.01のバージョンでは必須でしたが、HTML5で必須ではなくなりました。
ただしalt属性はSEO対策でも重要な役目を果たすので、基本的には指定することをお勧めします。
imgタグの特徴
imgタグを使用する際には気を付けなければいけないことがあります。
それはimgタグには、終了タグがなく、内容を持たないという点です。
h1タグなどの他タグの場合は、開始タグと終了タグの間に内容が入りますが、 img要素はimgというタグ単体になります。
このような内容を持たない要素のことを空要素と呼びます。
HTMLでは他にもmetaタグやinputタグなどが空要素にあたります。
HTMLの問題に挑戦しよう!
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの第一歩となるでしょう。
問題4:imgタグで画像を表示しよう
今回は以下の画像URLを指定して表示させましょう。
https://ninjacode.work/assets/img/kv.png
期待する画面

解答ソースコード
<img src="https://ninjacode.work/assets/img/kv.png" alt="忍者CODEの画像">
¥HTML¥
補足
alt属性を書いたからと言って直接的なSEO効果はありませんが、alt属性は検索エンジンのクローラーに画像の内容を伝えることができるため、画像検索での上位表示は狙うことができます。
imgタグはsrc属性とalt属性をセットで記述していきます。
src属性は、画像ファイルが置いてある場所とファイル名を指定します。
alt属性に関しては、画像の説明を記述します。
今回はsrc属性に指定の画像URLをコピぺで貼り付け、
alt属性に画像の説明を任意で設定すればOKです。