imgタグを使って画像を表示する【HTMLの書き方入門】

画像(image)表示するタグ

ページに画像を表示するためには、<img>というタグを使います。
<img>タグには、表示する画像ファイルを指定するsrcという属性が必須です。

index.htmlで画像を入れたい箇所は２つ。
それぞれ、下記のように書き換えると画像が表示されます。

カッコが全角のままだと表示されないので、注意してください。

• ＜画像：top.png＞→ <img src="images/top.png">
• ＜画像：banner.png＞→ <img src="images/banner.png">

画像の意味を示すalt属性

imgタグはsrc属性とその属性値だけでも、Webページ上に画像を表示することができます。が、もう一つ、セットで記述しておきたい情報があります。

それはalt属性(オルト属性)という、画像の代わりとなるテキスト情報。
代替えテキストとも呼ばれます。

alt属性を設定しておくと、通信状況が悪いなど、Webブラウザで画像が表示できないときに、画像の代わりに設定したテキストが表示されます。
また、検索エンジンに画像の情報を伝える役割もあるので、SEOにも役立ちます。

alt属性は以下のように記述します。

制作するページによっては、装飾のために画像を使うこともあります。
特に意味のない画像の場合は、alt=""と属性値を空にして書いておきましょう。

index.htmlのサイドバナーは、まだどんな情報を載せるか決まっていません。
代替えテキストが「バナー」では分からないので、空にしておきます。