画像が表示されず、壊れたアイコンが出るときは？

ほとんどの原因はsrcに書いた場所（パス）のずれです。ファイル名のつづり・大文字小文字・画像を置いたフォルダが合っているかを確かめましょう。

altには何を書けばいいの？

画像が見えない人に伝えたい内容を一言で書きます。「いちごがのったショートケーキ」のように、何が写っているかを具体的に書くのがコツです。

不要です。imgは中身をはさまない、1つで完結するタグなので、閉じるタグは書きません。

文字だけのページも素敵ですが、そこに写真やイラストが1枚あるだけで、ぐっと伝わりやすく、にぎやかになります。画像を表示するタグは <img>。ここまでのタグと、ひとつだけ違うところがあります。

<img src="/photo.jpg" alt="窓辺でくつろぐシマエナガ">

<img> を1つ置くだけで、画像が1枚あらわれます。

分解するとこうです。

書くもの	意味
`<img>`	image（画像）の目印。1つで完結するタグ
`src="..."`	どの画像を出すか（画像ファイルの場所）。sourceの略
`alt="..."`	画像の説明文

<p> や <a> は中身をはさみましたが、<img> は「ここに画像！」と置くだけ。だから </img> はいりません。“サンドイッチ型”とは少し違う、ということだけ頭のすみに置いておきましょう。

src には、いま書いているHTMLファイルから見て画像がどこにあるかを書きます。同じフォルダに置いた画像なら、ファイル名だけでOKです。

<img src="shima.png" alt="しまちゃんの写真">

もし images というフォルダを作って、その中に画像を入れたなら、フォルダ名も一緒に書きます。

<img src="images/shima.png" alt="しまちゃんの写真">

「今いる場所からの道順」を書くイメージです。フォルダの名前や区切りの / が1文字でも違うと、ブラウザはその場所を見つけられません。

alt は、画像が表示できないときに代わりに出る文字であり、目の見えない人が使う読み上げソフトが読み上げる文章でもあります。

<img src="/cake.jpg" alt="いちごがのったショートケーキ">

画像が出せないときは、altに書いた文字が代わりに出ます。

alt に「いちごがのったショートケーキ」と書いておけば、画像が出せない状況でも何の画像かが伝わります。ほんの一言で、いろんな人にやさしいページになる。だから alt は、飾りではなく大切な役目です。

検索エンジンも、画像そのものの中身までは読み取れません。alt に書いた文字が、その画像が何なのかを伝える手がかりになります。ページの内容と検索結果の両方に効いてくる、地味だけど大事な一言です。