ハイパーリンク！

3. 文書の途中へのリンク

以上では、ファイル間のジャンプでしたが、文書の途中へのリンクも作れます。

サンプル

前項で編集した index.html を使います。

1. index.html をテキストエディタで開きます。
2. html 要素、 head 要素、 body 要素の説明の項を、次のように編集します。文の途中の改行は不要です。

   <h2>html 要素</h2>
   
   <p>HTML 文書の要素は入れ子関係になっており、階層構造で捕らえることができ
   ます。その最も外側、最上位の階層の要素をルート要素と呼びます。要素の内容
   に現れる要素を子要素と呼びます。要素は必ず一つの親要素を持ちます。ただ一
   つ、ルート要素だけが例外で、最上位階層なので親要素を持ちません。</p>
   
   <p>html 要素は HTML 文書のルート要素です。子要素には
   <a href="#head">head 要素</a>と <a href="#body">body 要素</a>しか存在
   しません。その他の要素は、これらの要素の子要素として現れます。同じ親要素
   をもつ子要素を兄弟間系と呼びます。head 要素と body 要素は兄弟関係です。
   </p>
   
   
   <h2 id="head">head 要素</h2>
   
   <p>head 要素には、当該文書の基本情報を記述します。必ず title 要素が存在
   することが特徴です。</p>
   
   
   <h2 id="body">body 要素</h2>
   
   <p>head 要素の次には、body 要素が現れます。この内容が、当該文書の本文に
   なります。</p>
   

3. 上書き保存してブラウザで表示／動作を確認します。

次のようになれば成功です：

動作が確認できたら、他の場所に登場している「head 要素」や「body 要素」を始点アンカーとして、対応するＩＤへのハイパーリンクを作ってみてください。ソースは次のようになります：

<a href="#head">head 要素</a>

<a href="#body">body 要素</a>

演習

他の適当な要素に id 属性を与えて、その属性値ＩＤを与えられた要素へのハイパーリンクを作ってみてください。

たとえば、 html 要素の説明の項目の h2 要素に id="html" を与えて、本文中の「html 要素」、「ルート要素」という文字列からリンクを張ってみてください。各部品は次のように書きます。

<h2 id="html">html 要素</h2>

<a href="#html">html 要素</a>, <a href="#html">ルート要素</a>

id 属性とハイパーリンク

上のサンプルでは、同じ文書内の断片へのリンクでした。 id 属性値が href 属性値で "#id属性値" のようにしてリンク目的地になることを紹介しました。"#id属性値" は、絶対 URL、相対 URL の後ろにくっつけて利用できます。たとえば、 ./literature.html#dazai とすれば、同じディレクトリ内の literature.html という文書内で、 id="dazai" が与えられた要素が目的地になります。

optical.html と云うファイルの中に次の様に記述されている場合を考えます：

<h2 id="KK">Kramers-Kroning 関係式</h2>

このとき、上の h2 要素には KKというＩＤが与えられたことになり、このＩＤを使って、この要素へのハイパーリンクを作成できます。この場所を参照する URL は次のどれかになります：

絶対 URL

例） href="http://www.foo.com/physics/optical.html#KK"

相対 URL

例） href="../physics/optical.html#KK"

同一ファイル内

例） href="#KK"