ログイン
問題4

imgタグで画像を表示しよう

この問題では、ブラウザ上に画像を表示するために使用するHTMLタグを学習します。 Webページはただテキストが並んでいるだけの状態だとインパクトにかけてしまい、少し寂しいサイトだと捉えられてしまいます。画像が1枚でも表示されていることで、一気にWebサイトらしく見せることができるので、問題を通して画像表示を身につけましょう。

アイコン画像

本のアイコン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タグで画像を表示しよう

imgタグを使用して、画像を表示させてみましょう。
今回は以下の画像URLを指定して表示させましょう。

https://ninjacode.work/assets/img/kv.png

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <img src="https://ninjacode.work/assets/img/kv.png" alt="忍者CODEの画像">
¥HTML¥
            

コメントのアイコン解説

ブラウザに画像を表示させるにはimgタグを使用します。
imgタグはsrc属性とalt属性をセットで記述していきます。

src属性は、画像ファイルが置いてある場所とファイル名を指定します。
alt属性に関しては、画像の説明を記述します。

今回はsrc属性に指定の画像URLをコピぺで貼り付け、
alt属性に画像の説明を任意で設定すればOKです。
ログインして解答を見る

コメントのアイコン補足

imgタグを使用した際に指定するalt属性は、SEOとしての効果もあると言われています。
alt属性を書いたからと言って直接的なSEO効果はありませんが、alt属性は検索エンジンのクローラーに画像の内容を伝えることができるため、画像検索での上位表示は狙うことができます。
HTMLを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる