リンクはもっとも WWW を特徴付ける機能です。文書と他のリソース（情報資源）を結びつけて参照できるようにすることをリンクを張るといいます。リンクを張った文字列や画像をクリックすると別のウェブページや別のサイトを表示（ジャンプ）することができます。この機能をハイパーリンク（Hyperlink）と呼び、このような機能をもつ文書をハイパーテキスト（HyperText）と呼びます。
文書のある部分から他のリソースを参照できるようにリンクを張る場合、参照するリソースの所在は URI で指定することになります。はてさて一体、URI とは何のことやら。URL（Uniform Resource Locator）は、よく耳（目）にする用語だけれども、URI（Uniform Resource Identifier）という用語は、はじめて聞く（見る）、または聞き（見）慣れない用語だという方が多くいるのではないでしょうか。
URI という用語は、 World Wide Web 生みの親である、Tim Berners-Lee(ティム・バーナーズ＝リー)博士が開発した HTML, HTTP, URI のWWW 発明の仕組みである 3 本柱の 1つで、広く一般に知られている URL と基本的な違いはありません。URL も URI も人間の生活環境に当てはめれば住所のことを指し、ウェブページに当てはめて考えれば、World Wide Web 全体から見たページの所在であるアドレスのことを指します。
では、何故 URL の方が広く知られるようになったのか。それには HTML4 以前（西暦2000年前後）までは標準化団体の IETF が策定した HTML の仕様書から各ウェブサイトにおいてもウェブ上のリソースの所在を示すアドレスのことを URL という用語をもちいて解説していることが多かったことから URL の方が広く一般に知られ・使われるようになったようです。そして現在では、この URL（Uniform Resource Locator）に URN（Uniform Resource Name）を含めたより広い概念の意味として URI（Uniform Resource Identifier）の用語が使われるようになり、W3C においても唯一 URI のみがウェブ上のリソースの所在を示す公式のものとして定められています。
<a href="リンク先のURI">リンクの内容（文字やイメージ）</a>
a要素はアンカー（Anchor）を指定するインライン要素で、リンク（ハイパーリンク）を設定する場合に使います。リンクとは文字列やイメージ等の部分をクリックすることで別のページや別のサイトを表示（ジャンプ）できる機能です。a要素の href属性はリンク先を指定する属性で、値にはウェブページや画像、ダウンロードファイルなどのリソース（情報資源）の所在を URI で指定します。a要素の間に指定されたテキストやイメージ（画像）などが、マウスの左クリックなどの動作でジャンプできるようになるリンクボタンとなります。
通常、同一（ホームディレクトリを起点とする）ウェブサイト内に置かれている画像ファイルやHTML文書などの各リソースにリンクを張る場合、href属性は相対URI の形式で指定します。相対URI による指定とは、あるファイルやディレクトリ（Windows, Macintosh の OS における HD 内のフォルダに相当）を起点にして、ほかのファイルやディレクトリの場所を参照する方法です。
相対URI で画像や HTML文書などのファイルを指定する場合、基準となるファイルやディレクトリから見て、そのファイルが同じ階層にある・上の階層にある・下の階層にあるという形で表現します。そして相対URI の指定は同じ階層にある場合は「ファイル名」のみ、上の階層にある場合は「../ファイル名」、下の階層にある場合は「ディレクトリ名/ファイル名」と指定することができます。同じ階層にある場合は、ファイル名を指定するだけなので簡単ですが、上の階層にある場合・下の階層にある場合がちょっと複雑です。
例をとりあげて見ていきましょう。先の図には、一番上に "public.html" というホームディレクトリがあって、そこには "index.html" というファイルがあります。この "index.html" をウェブサイトのトップページと仮定します。この状況を当サイトに当てはめれば、トップページは、"http://w3g.jp/index.html" の URI に該当します。さらに、"public.html" のホームディレクトリには "img", "link", "main" の3つのディレクトリがあります。さらに、ディレクトリ "img" の中には "title.gif" の画像ファイルがあり、ディレクトリ "link" の中には、"sample.html" の HTML文書があり、ディレクトリ "main" 中には続いて、ディレクトリ "tips" があり、ディレクトリ "tips" の中には、"pass.html" の HTML文書があります。
それでは、一番上の階層にある "index.html" のファイルを起点にして各ファイルがどこにあるかを相対URI による指定で確認していきましょう。
まず、"title.gif" はひとつ下の階層になるので「ディレクトリ名/ファイル名」の形で "img/title.gif" の URI を指定することになります。次に "sample.html" も置かれているディレクトリ名が違うだけで同じひとつ下の階層になるので「ディレクトリ名/ファイル名」の形で "link/sample.html" の URI を指定することになります。最後に "pass.html" は2つ下の階層になるので「ディレクトリ名/ディレクトリ名/ファイル名」で "main/tips/pass.html" の URI で指定することになります。
index.html" を起点とする各ファイルの相対URI の関係<img src="img/title.gif" …><a href="link/sample.html">サンプル</a><a href="main/tips/pass.html">パスワード</a>今度は逆に一番下の階層にある "pass.html" を起点にした相対URI の指定を確認していきましょう。
ディレクトリを遡る場合は「../」の指定になります。まず、トップページの "index.html" のファイルがあるのは2つ上の階層になるので「../../ファイル名」の形で "../../index.html" の URI を指定することになります（*ウェブサーバーの DirectoryIndexディレクティブの設定によっては、各ディレクトリにある "index.html" などの特定のファイルをデフォルトで読み込むようになっているのでファイル名の部分を除いてディレクトリ名のみを指定するだけで可能です。その場合は "../../" の URI を指定することになります）。
次に "sample.html" のファイルは、まず2つ上の階層のホームディレクトリである "public_html" にまで遡って、そこからディレクトリ "link" にあるので、ホームディレクトリの "public_html" からひとつ階層を下げて「../../ディレクトリ名/ファイル名」の形で "../../link/sample.html" の URI を指定することになります。
最後に "title.gif" も "sample.html" と同じで、まず2つ上の階層のホームディレクトリである "publick.html" にまで遡って、そこからディレクトリ "img" にあるので、ホームディレクトリの "public_html" からひとつ階層を下げて、「../../ディレクトリ名/ファイル名」の形で "../../img/title.gif" の URI を指定することになります。
pass.html" を起点とする各ファイルの相対URI の関係<a href="../../index.html">トップページ</a><a href="../../link/sample.html">サンプル</a><img src="../../img/title.gif" …>そして、これら相対URI形式の指定に対して「http://」や「ftp://」などから始まる URI でウェブ上にあるリソースの所在を示す方法を 絶対URI といいます。これは WWW 全体から見た視点でリソースの所在を指定します。たとえば、他の制作者のウェブサイトへリンクを張る場合は、相対URI ではなく、WWW 全体から見た視点でそのウェブサイトの特定のファイルを指定しなければならないため、絶対URI形式によるリンクで参照することになります。なお、同一ウェブサイト内のリンクを相対URI形式で指定しておくと、サーバー移転時に各リンク先を書き換える必要がないので便利です。
a要素<a href="リンク先のURI" target="_top">リンクの内容</a>
a要素の target属性は href属性に指定されたリンク先の表示方法を指定します。値には4つのキーワードと任意のフレーム名（frame要素に指定された name属性の値）を指定することができます。
また、base要素に対する target属性を "<head>" と "</head>" の間に指定することで、そのページを起点とするリンクは常に指定された方法で表示されます。もちろん、<base target="値"> を指定しながら、各アンカーには個別にリンク先の表示方法を指定することもできます。
なお、HTML4.01厳密型DTD では、target属性は廃止されたため指定できません。フレームを使用している場合、target属性を指定することは止むを得ませんが target属性の指定は、ユーザーにとっては必ずしも親切な機能とは言えません。リンク先をクリックする度に新しいウィンドウを開かれると、ユーザーが前に見ていたページに戻ろうとしても戻れなくなってしまう場合もあります。なぜなら新しいウインドウを開く場合、UA に付いている｢戻る｣機能が使用できなくなるからです。
リンク先を新しいウィンドウで開くかどうかの動作はユーザー側で決めることができます。しかし、一部の UA を除いてユーザー側で同一ウィンドウで開くかどうかの指定をすることはできません。ユーザー側が、今参照しているページとリンク先のページが共に参照すべきだと分かっていれば、ユーザー自身が新しいウィンドウで開くようにするはずです。制作者側でどうしても target属性を指定したいという場合は、ユーザー側で選択できるように新規ウインドウを開くリンクボタンと同一ウインドウで開くリンクボタンの2つを用意しておくとユーザーにも喜ばれるでしょう。
base要素<p>同一ページ内の指定箇所へジャンプ</p> <a name="アンカー名">アンカーの内容</a> <a href="#アンカー名">リンクの内容</a> <p>他のページの指定箇所へジャンプ</p> <a name="アンカー名">アンカーの内容</a> <a href="ページのURI#アンカー名">リンクの内容</a>
a要素の name属性はアンカー名を指定します。このアンカー名は、ページ内の特定箇所をリンク先として指定できるように、あらかじめ設定しておく名称です。name属性でアンカー名を付与されたリンクの目的地を示すアンカーのことを目的地アンカー（終点アンカー）と呼びます。name属性で指定されたアンカー名は、そのページ内にのみ有効でページ内で同じアンカー名が重複した場合はひとつのアンカー名に対するリンクにしか働きかけることができません。このため、ひとつの文書内でアンカー名はひとつひとつ違う一意の名称を指定する必要があります。
リンク先の指定は a要素の href属性を使用して、値にはリンク先として同じページ内にあるアンカー名の文頭にハッシュ（#）を前置します。href属性を持つ a要素のことを始点アンカーと呼び、目的地アンカー（終点アンカー）を指定した目的地へのジャンプに関連付けて使います。さらに、同一ページ内でなく他のページの特定箇所にジャンプができるようにしたい場合、href属性の値は、"表示させるページのURI#アンカー名" という形で設定します。そして、他の制作者のウェブサイトの特定箇所を参照したい場合においても、目的地アンカー（終点アンカー）の name属性が設定されていれば、"表示させるページの絶対URI#アンカー名" の形で、そのページ内の特定箇所にジャンプさせることができます。
また、HTML4 からは name属性に代わって新たに id属性が登場しました。HTML の後継である XHTML の XHTML1.1 というバージョンからは、name属性は完全に廃止されたため、これからは name属性ではなく、id属性を指定することが推奨されています。使い方は基本的に同じで、id属性も1つの文書内で同一の名前をつけることができないので注意してください。さらに name属性と違って、id属性はほぼ全ての要素（base要素, head要素, html要素, meta要素, script要素, style要素, title要素を除く）に指定することが可能です。
id属性<address>ご指摘・ご質問等ありましたら <a href="mailto:メールアドレス">こちら</a> までお知らせください。</address>
a要素の href属性の値に、"mailto:" の記述を使い、"mailto:ryo.ueda@gmail.com" のように送信先のメールアドレスを指定することで、ユーザーの環境にメーラー（電子メールソフト）が装備されている場合、メーラーを起動させるリンクを作成します。この場合に起動するメーラーは、UA の環境設定で指定されているメーラーか、UA の標準のメーラーです。
なお、address要素は文書作成者やサイト運営者の連絡先、文書に関する情報などを示すブロック要素です。連絡先とは、一般的に文書制作者やサイト運営者の氏名・メールアドレスなどを記したり、会社の場合は会社の現住所や電話番号などを記して使われています。 その他にも文書に関する情報として、文書の公開日と更新日、著作権（転載の可否など）やリンク情報を示すのにも使われています。視覚ブラウザでは上下に余白はありませんが、表示域の左右いっぱいまでの範囲を占め、前後に改行を置き、テキストはイタリック体（斜体）で表示されます。
address要素<address>電話でのお問い合わせは <a href="tel:030****…">こちら</a>まで </address>
a要素の href属性の値に "tel:" の記述を使い、"tel:090xxxxxxxx" のように指定の電話番号に電話をかけるリンクを作成します。これは Docomo, au, SoftBank などの携帯電話端末用の UA で機能する HTML で Compact HTML と呼ばれています。値となる電話番号にはハイフン（-）などを入れずに、固定電話の番号であれば市外局番から続けて指定します。
<a href="リンク先のURI" accesskey="P">Prev[<kbd>P<kbd>]</a> <a href="リンク先のURI" accesskey="N">Next[<kbd>N<kbd>]</a>
accesskey属性はキー操作で動作を実行する機能で、a要素に対して指定した場合、リンク先へのジャンプ、メーラの起動、指定の電話番号へ電話をかけることができます。accesskey属性の値には半角英数字1文字を指定します。
ただし、ページ内で同じアクセスキーが重複したり、各 UA が実装しているキーボードショートカットキーと競合しないように配慮して指定する必要があります。まず、A, B, D, E, F, G, H, T, V あたりのキーはアクセスキーに使用しない方が無難です。また、各 UA が実装しているキーボードショートカットキーと競合しないためにも、これまでは 0-9 までの数字をアクセスキーに使うのが無難だったのですが、Mac OS、及び Mac OS X には、｢ことえり｣というかな漢字変換プログラムが組み込まれたことで、アクセスキーに数字を使うことでもショートカットキーと重なってしまうことになりました。通常、リンクは Tab で移動して Enter を押すことで指定のリンク先にジャンプできるので、まずページ内にある全部のリンクにアクセスキーを設定する必要はありません。サイト内の全ページに共通するナビゲーションなどユーザーを誘導するにあたって重要な部分に設定しているだけで十分であるため、残ったキーでなんとか工夫してみましょう。
また、アクセスキーとリンク先は、できるだけ関係性のあるキーを配列することで、より使いやすくなることでしょう。たとえば、当該文書から前後関係の文書へ移動するナビゲーションがある場合、ひとつ次の文書へのリンクには Next という意味を込めて N をアクセスキーに、ひとつ前の文書のリンクには Previous という意味を込めて P をアクセスキーに設定するなどの使い方があります。
アクセスキーの実行方法は、ユーザーのパソコンのプラットフォーム（OS）によって異なります。たとえば、Windows では Alt を、Macintosh では Cmd と一緒に指定のアクセスキーを押します。また、最近はブラウザのショートカットキーとアクセスキーが被らないように各ブラウザごとでアクセスキーの動作方法を設定するような傾向にあります。こうなってくるとあのキーはあのブラウザのショートカットキーと被るから避けた方が良いということはなくなり、どの英数字をアクセスキーに設定しても良いようになってきます。Opera の場合は Shift + Esc と共に指定のアクセスキーを一緒に押すことになっており、Firefox の場合は Windows が Alt + Shift, Macintosh が Cmd, Unix が Ctrl + Shift と共に指定のアクセスキーを一緒に押すことになっています。
また、動作の仕方も UA によって異なり 携帯電話端末, Netscape, Firefox, Opera, Safari ではアクセスキーを実行するとリンク先に直接ジャンプします。Internet Explorer では、アクセスキーを実行すると指定したリンクが選択状態（フォーカス）になり、さらに Enter を押すと指定のリンク先にジャンプします。携帯電話端末であればアクセスキーを上手に設定することで、ユーザーは 0-9 までの数字キー, アスタリスク（*）, ハッシュ（#）を押すだけで指定のリンク先へ容易にジャンプすることが可能です。また、ユーザーへの配慮としてアクセスキーを設定していること（リンク横にキーを付記するなど）、アクセスキーの実行方法をページの隅に付記しておくか、別にヘルプページを用意するなどユーザーが利用しやすいように工夫しておくと有用です。
accesskey属性<a href="リンク先URI"> <img src="イメージファイルのURI" border="0"> </a>
イメージ・オブジェクトで紹介したイメージの枠線を指定する border属性の値を "0" にすることで、リンクの設定されたイメージ周辺の枠を表示しないようにします。Macintosh版Internet Explorer 5 や Opera では border属性の初期値は "0" に設定されているため枠線は表示されませんが、UA によってはイメージにリンクが設定されている場合に枠線を表示するものがあります。この枠線を表示したくない場合は、img要素に border="0" を加えることでリンクを設定した際の枠線を表示させないようにすることができます。しかし、img要素の border属性は非推奨属性のため、CSS の borderプロパティで代替することが推奨されています。
<img src="イメージファイルのURI" alt="代替テキスト" usemap="#マップ名称" width="横幅" height="高さ"> <map name="マップ名称"> <area shape="rect" coords="20,20,60,70" href="リンク先のURI" alt="代替テキスト"> <area shape="circle" coords="90,30,20" href="リンク先のURI" alt="代替テキスト"> <area shape="poly" coords="120,30,140,80,160,30,140,40" href="リンク先のURI" alt="代替テキスト"> </map>
1枚の画像に複数のリンク先を指定できるイメージマップ（Image Map）の作成方法を解説します。なお、イメージマップには、CGI を利用したサーバサイド・イメージマップと map要素で作成するクライアントサイド・イメージマップの2種類があり、ここではクライアントサイド方式のイメージマップを紹介します。
イメージマップはクリッカブルマップ（Clickable Map）とも呼ばれ、1枚の画像の中に色々なリンク先を設定しておき、クリックした位置に応じて指定のリンク先にジャンプする機能です。1枚の画像の中に複数のリンク先を設定できることから、たとえば日本地図の画像を利用して、各都道府県の領域をクリックすると、その詳細なページへ移動するなど応用範囲が広く、Yahoo! JAPAN のトップページでも使用されている人気のある機能です。
img要素の usemap属性は src属性で指定した画像ファイルに適用するマップ設定の名称を指定する属性です。usemap属性の値は map要素の name属性で指定した値になり、マップ名称の文頭にハッシュ（#）を前置して、usemap="#マップ名称" の形で指定します。map要素はイメージマップを定義する要素で、イメージマップの定義全体を map要素で囲みます。name属性は map要素で定義するイメージマップの名称を指定します。この名称を img要素の usemap属性に指定することで、その画像に map要素内で定義された指定が適用されます。area要素は map要素の中で使用して、img要素で指定された画像にリンク先を指定します。area要素は内容をもたない空要素で終了タグがありません。area要素を複数記述することで、複数のリンク先を設定できます。area要素の shape属性は画像にリンクを設定する際の形状を指定し、coords属性が、その領域を座標値で指定します。指定する座標値のポイントは、リンクの形状によっても異なります。shape属性の値には "rect", "circle", "poly" の3種類の形状があり、それぞれ次のようなポイント座標値を coords属性で指定します。
coords="（左上の）x,（左上の）y,（右下の）x,（右下の）y"coords="（円の中心の）x,（円の中心の）y,（円の半径）r"coords="（頂点1の）x,（頂点1の）y,（頂点2の）x,（頂点2の）y,…"coords属性の設定は shape属性で指定された形状によって変わります。shape属性の値に矩形の "rect" を指定した場合は、「左上のx座標,左上のy座標,右下のx座標,右下のy座標」の4点を指定します。円形の "circle" を指定した場合は、「円の中心のx座標,円の中心のy座標,半径r」を指定します。
多角形の "poly" を指定した場合は、画像の左上（0 , 0）を原点に多角形の各頂点となる「x座標,y座標」をいくつも並べて指定します。area要素の alt属性は img要素の alt属性と同じで、画像のもつ情報の代替テキスト（altanative text）を指定します。代替テキストとは何らかのトラブルで画像が表示できない場合や音声出力・点字出力などの非視覚環境、画像の表示に対応していない・あるいは表示しない設定にしている環境において、その画像の表現する情報の代替となる文章のことです。なお、この場合の area要素はリンクとして機能するため、代替テキストには通常のアンカーを指定する場合と同じようにリンク先の内容を記述するのが良いでしょう。area要素の href属性に指定されたリンク先を巡回することができません。このため重要なナビゲーション部分にイメージマップを使用することはできるだけ避けた方が無難なようです。なお、area要素の代わりに検索エンジンのロボットが巡回できる a要素でもイメージマップは作成可能ですが、Macintosh版Internet Explorer 5, Netscape 7 以上, Firefox 1 以上, Opera 7 以上しか対応していないため（Windows版Internet Explorer 6, Windows版Internet Explorer 7, Safari では無効）、area要素に比べると極端にサポートが落ちます。さらに a要素は、内容をもたない area要素とは違い、終了タグも必須のためアンカー内容をもったリンクボタンが表示され、どうしても見た目が悪くなってしまう欠点があります。area要素に代わって a要素に shape属性と coords属性を指定したサンプルを用意しました。
まず、a要素に shape属性と coords属性を指定する場合は、map要素には特別にブロック要素を内容にしなければなりません。また、a要素は空要素ではなく、リンク先の情報となる内容をもたなければならないため、画像の横にはリンクボタンが並び、見た目はどうしても悪くなります。そこで、map要素の内容となっているブロック要素を対象に CSS の text-indentプロパティに極端な負の値（例："text-indent : -9999px ;" など）を指定することでアンカーテキストは表示域から見えなくなり一応は見た目を整えることができるでしょう。ただし、辛うじてアンカー内容をリンクボタンとして機能することができていた Windows版Internet Explorer 6, Windows版Internet Explorer 7, Safari では全く動作しないことになります。
<img src="イメージファイルのURI" alt="代替テキスト" usemap="#マップ名称" height="イメージの横幅" width="イメージの高さ"> <map name="マップ名称"><p> <a shape="rect" coords="20,20,60,70" href="リンク先のURI">リンク先の内容</a> <a shape="circle" coords="90,30,20" href="リンク先のURI">リンク先の内容</a> <a shape="poly" coords="120,30,140,80,160,30,140,40" href="リンク先のURI">リンク先の内容</a> </p></map>
area要素map要素<a href="リンク先URI" title="補足情報">リンクの内容</a>
title属性はタイトルを指定する属性です。視覚ブラウザの多くはポインティングデバイス（マウスやノートパソコン付属のトラックパッドなど）のカーソルを title属性の指定された要素の部分にあわせることで title属性に記述したテキストをツールチップとして表示します。音声出力・点字出力などの非視覚環境においても補足情報として表現されます。
title属性は a要素以外にもほぼ全ての要素に指定することができる共通属性（汎用属性）のひとつです。たとえば、水平線（横罫線）を表示する hr要素や、フレームを形成する frame要素などは非視覚環境では再現（表現）しにくい要素のため制作者側で積極的に補足情報となる title属性を指定することが推奨されています。
title属性frame要素hr要素