問題
4imgタグで画像を表示しよう
この問題では、ブラウザ上に画像を表示するために使用するHTMLタグを学習します。 Webページはただテキストが並んでいるだけの状態だとインパクトにかけてしまい、少し寂しいサイトだと捉えられてしまいます。画像が1枚でも表示されていることで、一気にWebサイトらしく見せることができるので、問題を通して画像表示を身につけましょう。
HTMLの問題に挑戦しよう！
問題
「imgタグで画像を表示しよう」
imgタグを使用して、画像を表示させてみましょう。
今回は以下の画像URLを指定して表示させましょう。
https://ninjacode.work/assets/img/kv.png
期待する画面
解答と解説（imgタグで画像を表示しよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
ブラウザに画像を表示させるにはimgタグを使用します。
imgタグはsrc属性とalt属性をセットで記述していきます。
src属性は、画像ファイルが置いてある場所とファイル名を指定します。
alt属性に関しては、画像の説明を記述します。
今回はsrc属性に指定の画像URLをコピぺで貼り付け、
alt属性に画像の説明を任意で設定すればOKです。
補足
imgタグを使用した際に指定するalt属性は、SEOとしての効果もあると言われています。
alt属性を書いたからと言って直接的なSEO効果はありませんが、alt属性は検索エンジンのクローラーに画像の内容を伝えることができるため、画像検索での上位表示は狙うことができます。
ポイント
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タグなどが空要素にあたります。
