16.3.5 ハイパーリンク

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

ウェブページ間のリンク

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

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

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

はいぱーワークブック

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

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

相対リンク

リンク先のURLを指定する際,リンク先のURLが示す場所とリンクを貼る文書が同一サーバ上にある場合は,URLの代わりにリンク先の場所の相対パス(review_s13.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属性以外にrelated_s16.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度使うことはできません.