例えば三重大学ホームページへのリンクを設定するには
<p>私は<a href="http://www.mie-u.ac.jp/">三重大学</a>の学生です。</p>
のように書きます。「私は三重大学の学生です」のように表示されます。
a href の a は anchor（アンカー，<a href="...">...</a>
をアンカー要素といいます。href は hypertext reference または hyperreference から来ています。
<a href="...">...</a> はインライン要素ですので，上の例のように，<p>...</p> などのブロックの中に入れる必要があります。
アドレス（URL）の中に & が含まれる場合は，& を & と書き直す必要があります。これをしないと & の直後の文字列によっては誤動作します（例えば xxx.php?x=1<=2 の場合 < が < に変換されてしまう）。
同じフォルダ内にあるファイルへのリンクは，ファイル名だけで行えます。例えば index.html
から photo.html をリンクするなら，index.html
の中に
<p>私の趣味は<a href="photo.html">写真</a>です。</p>
のように書きます。
逆に，photo.html
から index.html に戻るリンクを設定するには，photo.html
の中に
<p><a href="index.html">戻る</a></p>
のように書けばいいと思うかもしれませんが，これは
<p><a href="./">戻る</a></p>
のように書くのが正しい方法です。index.html
はつねに省略できる（ようにサーバで設定してある）ので，アナウンスするURL（Webページのアドレス）は index.html
を含まないようにし，「戻る」のリンクをたどっても index.html
というファイル名が現れないようにします。これはURLの正規化（url canonicalization）の一つで，これを守れば，検索エンジンに優しいサイトになります。
同じサーバの中の（ドメイン名の同じ）ファイルへのリンクなら，http://ドメイン名
の部分は省略できます。例えば http://同じドメイン/foo/bar.html
へのリンクは <a href="/foo/bar.html">...</a>
となります。
http://example.org/foo/bar.html
から http://example.org/
へのリンクは，<a href="../">一つ上の階層に戻る</a>
あるいはこの場合は <a href="/">ホームページに戻る</a>
と書くことができます。
ただし，「戻る」といっても，どこに戻るのかわかりにくいので，最近はこのページの最初にあるような「パンくずリスト」（breadcrumbs）を使うことが増えています。
「パンくずリスト」（breadcrumbs）は，Webサイトで迷子にならないようにするためのリンクのことです。グリム童話「ヘンゼルとグレーテル」で主人公が森で迷子にならないように通り道にパンくずを置いていった話にちなみます。
たとえばこのページ先頭のパンくずリストは，次のように書かれています：
<div id="breadcrumbs"> <a href="/~okumura/">ホーム</a> > <a href="./">XHTMLとCSS</a> > </div>
スタイルシートには次のように定義してあります：
#breadcrumbs { font-size: 90% }
div#breadcrumbs + h1 { margin-top: 0 }
つまり，パンくずリストのフォントは通常の90%のサイズで，後続のh1要素の直前のマージンを0にしてあります。
このページの ほげ という名前のところに飛びます（飛ばない場合はこのページの一番下の説明をご覧下さい）。
このページの <a href="#hoge">ほげ</a> という名前のところに飛びます。
別のページからページ内の特定の位置に飛ぶには，<a href="http://oku.edu.mie-u.ac.jp/~okumura/xhtml/links.html#hoge">ほげ</a> のようにします。
別窓でのリンクは <a href="http://example.org/" target="_blank"> ... </a>
のように書きます。また，target="hoge"
のように適当な名前を与えると，その別窓を後で再利用できます。
他サイトへのリンクはすべて別窓でのリンクにしているサイトがあります。自サイトの滞在時間を少しでも延ばそうという意図だと思いますが，リンクをたどるたびに窓が開くのは嫌なことです。窓だらけになってしまうだけでなく，慣れていない人は，戻ろうとして「戻る」ボタンを押しても戻れないので，パニックになってしまうことがあります。
CSSでリンクの色を指定することができます：
a:link { color: blue } /* 通常のリンク */
a:visited { color: purple } /* 訪問したリンク */
a:hover { color: red } /* マウスの乗ったリンク */
a:active { color: teal } /* クリック中のリンク */
a[name]:hover { color: black }
最後のものは，<a name="...">...</a>
のような飛び先アンカーにマウスが乗っても色が変わらないようにするためのトリックです。
CSSは後のものが前のものに勝ちますので，指定の順序が大切です。
好ましくないページへのリンクは <a href="..." rel="nofollow">悪いサイト</a> のようにしておきましょう。
Google では，信頼のおけるページからリンクされたページは格付けが上がり，逆に好ましくないページへのリンクを含むページは格付けが下がるようです。この仕組みを働かせないために nofollow が使えるようです。
まだ下に例があります。
<h3 id="hoge">ほげ</h3>
これは新しい書き方です。XHTML 1.1 からはこの書き方しか認められていません。
昔のHTMLでは次のように書きました。
<h3><a name="hoge">ほげ</a></h3>
互換性のためには両方の書き方を併用します。この書き方は XHTML 1.0 では認められています。
<h3><a name="hoge" id="hoge">ほげ</a></h3>
Last modified: 2011-08-10 14:36:44