リンクと画像

aタグとimgタグで、他のページへのリンクを作り、画像を表示しましょう。

7 分 · 3 問

HTMLの「HyperText（ハイパーテキスト）」とは、まさにリンクでページ同士をつなぐ能力のことです。リンクは <a> タグ（anchor、アンカーの略）で作ります。その行き先は href 属性（hypertext reference）で指定し、そこにはURL、つまり https://en.wikipedia.org のようなWebページのアドレスが入ります。<a> と </a> の間に置かれたテキストがクリック可能になります。

<p>My favorite pages:</p>
<a href="https://en.wikipedia.org">Visit Wikipedia</a>
<a href="contact.html">See the contact page</a>

画像を表示するには、<img> タグを使います。これは自己完結型タグ（self-closing tag）です。コンテンツも終了タグも持たず、すべてがタグ自身の中に収まります。2つの属性が欠かせません。src（source、ソース）は画像ファイルがどこにあるかを示します。alt（alternative text、代替テキスト）は画像を言葉で説明します。このテキストは画像の読み込みに失敗したときに表示され、視覚に障がいのある人が使うスクリーンリーダーによって読み上げられます。

<img src="images/cat.jpg" alt="A sleeping ginger kitten">
<img src="logo.png" alt="My site's logo">
<img src="beach.jpg" alt="A beach at sunset">

この2つを組み合わせることもできます。<a> 要素の中に置かれた画像はクリック可能になります。これはまさにWebサイトのロゴがしていることで、クリックするとホームページに戻れます。

<a href="https://en.wikipedia.org">
  <img src="wiki-logo.png" alt="Wikipedia logo">
</a>

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. リンクの行き先アドレスが入る属性はどれですか？
   • src
   • href
   • alt
   • lang
2. 画像のalt属性は何のためのものですか？
   • 画像が表示されないときに画像を説明するため
   • 画像のサイズを設定するため
   • 画像ファイルのアドレスを指定するため
3. <img> タグには終了タグがありますか？
   • はい、必ず </img> を書きます
   • いいえ、自己完結型タグです
   • 画像が大きい場合だけ