16.3.5 ハイパーリンク

ここでは，WWWの目玉であるハイパーリンクの方法を説明します．(9.1.1 ウェブとは?)

ウェブページ間のリンク

ハイパーリンクはa要素によって表します．例えばはいぱーワークブックにリンクするときは，次のように書きます．

<a href="http://hwb.ecc.u-tokyo.ac.jp/">はいぱーワークブック</a>

すると，ブラウザには次のように表示されます．

はいぱーワークブック

これではいぱーワークブックへのリンクが貼れました．簡単ですね．

なお，aタグで囲った文字列のことを始点アンカー，リンクの行き先のことを終点アンカーといいます．今の例では始点アンカーは「はいぱーワークブック」という文字列ですが，後述するimg要素を使うと始点アンカーとして画像を指定することもできます．また終点アンカーもURLで指定できるものならHTML文書に限りません．画像や動画や音声などにリンクを貼ることも可能です．

相対リンク

リンク先のURLを指定する際，リンク先のURLが示す場所とリンクを貼る文書が同一サーバ上にある場合は，URLの代わりにリンク先の場所の相対パス(13.4.4 絶対パス名と相対パス名)を書くことができます．たとえば，リンクを貼る文書と同じディレクトリにある test.html というウェブページにリンクを貼るには

<a href="test.html">test.html</a>

と書くだけで済みます．このようなリンクの方法を，相対リンクと言います．

同一ページ内のリンク

同一のウェブページ内でリンクを張ることもできます．それにはまず，終点アンカーを次のように指定します．

<a name="anchor">終点アンカー</a>

anchorの部分はURLとして使える文字なら何でも構いません．ページ内のアンカーに対してリンクを貼るときは，href属性に#とアンカー名を続けて書きます．

<a href="#anchor">始点アンカー</a>

こうすると，始点アンカーをクリックしたときに anchor の場所まで移動することができます．具体的な例を見てみましょう．実はこのページの上にある「ウェブページ間のリンク」という見出しに

<h1><a name="link_between_webpages">ウェブページ間のリンク</a></h1>

という風にアンカーを設定しておいたので，次のリンクをクリックするとページの上の見出しにジャンプします．やってみてください．

<a href="#link_between_webpages">ウェブページ間のリンク</a>

ウェブページ間のリンク

この機能は特に，長いページの目次を作成したりするときに有効です．また，name属性以外に16.4.4 セレクタ(1) クラスとIDで説明するid属性をページ内アンカーとして使うことも出来ます．その時のリンクの貼り方は，name属性の時と全く同じです．

ちなみに

<a href="index.html#anchor">〜</a>

のようにすると，リンク先のページ内にあるアンカーを指定することができます．

注意

a要素は，入れ子にすることはできません．例えば次のような書き方は禁止されています．

<a href="link1.html">ここはlink1で<a href="link2.html">ここだけlink2</a></a>

また，name属性で指定したアンカー名は，同一ページ中で2度使うことはできません．