a 要素のリンクの目的を説明するリンクテキストを提供する

例 1

HTML において、a 要素のテキストコンテンツを用いてリンクの目的を説明する。

<a href="routes.html">
  Current routes at Boulders Climbing Gym
</a>

例 2

画像のリンクの目的を説明するために、img 要素に alt 属性を使用する。

<a href="routes.html">
   <img src="topo.gif" alt="Current routes at Boulders Climbing Gym" /> 
</a> 

例 3

アンカー (a) 要素が img 要素に加えてリンクの目的を説明するテキストを含むときは、空の alt 属性を使用する。リンクテキストはページ上で画像の隣に表示されることに注意する。

<a href="routes.html">
  <img src="topo.gif" alt="" />
  Current routes at Boulders Climbing Gym
</a>

例 4

サイトでは、製品の詳細ページの「Feedback」リンクをクリックすることで、利用者がログインしたときに製品に関するフィードバックを提供することができる。他の利用者又は製品メーカーは、フィードバックに応答することができる。フィードバックのリンクは、利用者のフィードバックへの応答が利用可能な場合に、「Feedback」テキストの前にアイコンを表示する。ヘルプ情報は、このアイコンを二重引用符を含む吹き出しとして説明し、アイコン自体を例として示している。 ヘルプテキストにおけるアイコンのテキストによる代替は、「応答受信アイコン」である。複数のモダリティを使用してこのアイコンを識別できるように、製品の詳細ページ (応答が利用可能な場合) で同じテキストによる代替が使用される。

<a href="prod_123_feedback.htm">Feedback 
         <img src="response.gif" width="15" height="15" alt="Response received icon" /></a>

例 5

リンクはテキスト及びアイコンを含み、アイコンはリンク先についての追加情報を提供している。

<a href="WMFP.pdf">
Woodend Music Festival Program
<img src="pdficon.gif" alt="PDF format"/>
</a>

例 6

MyCorp 社の年次レポートは企業のウェブサイト上から PDF ファイルとして入手でき、年次企業予算は Excel ファイルとして入手できる。

<p>
<a href=”2009mycorp_report.pdf”>MyCorp 2009 Annual Report (pdf)</a><br />
<a href=”2009mycorp_budget.xls”>MyCorp 2009 Annual Budget (Excel)</a>
</p>

例 7

HTML5 においてブロックレベル要素をリンクで囲む。

<article>
<a href="news.html">
<h3>Budget Debate Continues in Parliament</h3>
<p class="subhead"><img class="alertimg" src="alerticon.png" alt="Breaking News" height="30" width="30">Members of Parliament continued vigorous debate on three challenging issues surrounding the upcoming year's budget.</p>
<p>Read more</p>
</a>
</article>

ブロックレベル要素をリンクで囲む実例を示す。