リンクと画像の書き方 — a と img でつまずくのは属性

HTMLの中でも、リンクと画像は最初に必ず使う2つです。どちらもタグ自体は短いのですが、中身の属性を間違えると静かに失敗します。エラーが出ないので、気づきにくいのがやっかいなところです。

リンク：a要素

<a href="about.html">運営者について</a>

<!-- 別のサイトへ。別タブで開くなら target と rel をセットで -->
<a href="https://example.com" target="_blank" rel="noopener">外部サイト</a>

• href … リンク先。これが無いと、ただの文字として表示される
• target="_blank" … 別タブで開く。付けるときは rel="noopener" もセットで書く
• リンクの文字は「こちら」ではなく、行き先が分かる言葉にする（読み上げ環境でも意味が通る）

画像：img要素

<img src="images/cat.jpg" alt="窓辺で丸くなっている茶トラの猫" width="600" height="400" />

• src … 画像ファイルの場所。ここが1文字でも違うと表示されない
• alt … 画像の内容を説明する文字。読み上げ環境で使われ、画像が出ないときにも表示される
• width / height … 元の画像の寸法。書いておくと、読み込み中にレイアウトががくつかない

画像が出ないとき、画面はこう見える

src が間違っていると、ブラウザは代わりに alt の文字を表示します。下のデモの1つ目がその状態です。壊れた表示を一度見ておくと、実際に遭遇したときすぐ気づけます。

つまずきの原因はだいたいこの3つ

• パスの書き間違い（images と image、ハイフンとアンダースコアなど）
• 拡張子の食い違い（.jpg のつもりが実ファイルは .jpeg や .png）
• 大文字小文字の違い（自分のパソコンでは表示できても、公開したサーバーでは出ないことがある）

3つ目は特に見落としがちです。手元のWindowsやMacでは大文字小文字を区別しないのに、公開先のサーバーは区別する、という食い違いで起きます。ファイル名はすべて小文字で統一しておくのが安全です。