Let's begin XHTML―さあ始めよう XHTML

Section 6:ハイパーリンク

 WWW ドキュメントで忘れてはいけない機能が“ハイパーリンク”である。ここでは,基本的なハイパーリンクの設定方法について説明する。

ハイパーリンクのホットスポット:a 要素

 ハイパーリンクのホットスポット(ハイパーリンクが張られる部分)は,href 属性を伴う a 要素である。

<a href="URI">...</a>

href 属性を伴う a 要素は,パラグラフや見出し中の語句にハイパーリンクを張る。href 属性の引用符の中には,ハイパーリンク先の URI(簡単には,インターネットアドレス)を指定する。a 要素の内容には,テキストなどを含むことができる。

 次に示すのは,パラグラフ中の“Academic HTML”の句に,http://www.tg.rim.or.jp/~hexane/ach/ へのハイパーリンクを張るものである。

<p> <a href="http://www.tg.rim.or.jp/~hexane/ach/">Academic HTML</a> には,HTML 2.0,HTML 3.2,HTML 4,CSS1,CSS2,XHTML 1.1 のチュートリアルがあります。</p>

a 要素は,内容にパラグラフ・見出しなどを含んではならない。以下は,誤った例である。

<a href="http://www.tg.rim.or.jp/~hexane/ach/"><h3>Academic HTML</h3></a>

また,内容に a 要素を含むこと(入れ子)も許されない。

 href 属性に与える URI は,大きく分けて絶対指定と相対指定がある。

 絶対指定は,たとえば“http://www.tg.rim.or.jp/~hexane/ach/”のように URI をはじめから書き出す指定方法である。

 一方,相対指定はその文書の URI(または特に指定した URI)を基準として URI を指定するものである。たとえば,現在の URI が“http://www.tg.rim.or.jp/~hexane/ach/lbxh/lbxh06.htm”である場合,URI“http://www.tg.rim.or.jp/~hexane/ach/lbxh/lbxh07.htm”を指定する場合は,前者を基準として“lbxh07.htm”とすればよい。また,同様に,URI“http://www.tg.rim.or.jp/~hexane/ach/lbxh/fig/figure.png”を指定する場合は“fig/figure.png”とすればよい。

 これら URI の指定に関しては,Appendix C で改めて述べることにする。

ホットスポットへのアクセスキー

 a 要素で設定されたハイパーリンクのホットスポットを利用しやすくするために,accesskey 属性を使ってアクセスキーを設定することができる。

accesskey="アクセスキーに設定する 1 文字"

アクセスキーが設定されたホットスポットには,キーボードを使って移動することができる。これは,マウスを使うことが困難な人に便宜を図ると同時に,一定の機能を持つナビゲーション用のホットスポット(たとえば,進む,戻る,目次に戻るなど)に決まったアクセスキーを割り当てておくことで,快適な閲覧環境が提供できる。また,このアクセスキーは,携帯電話端末での WWW 閲覧時にも効果がある。

 たとえば,次のように利用する。

<p>[<a href="doc07.html" accesskey="n">次へ</a>|<a href="doc05.html" accesskey="p">前へ</a>|<a href="./" accesskey="x">目次へ</a>]</p>

上記の例では“次へ”のホットスポットに対して“n”,“前へ”に対して“p”,“目次へ”に対して“x”のアクセスキーを割り当てている。たとえば,

  • Internet Explorer および Netscape では,
    • Windows 版は,Alt キーを押しながらこれらのキーを押すことで,
    • Mac OS 版は Cmd キーを押しながらこれらのキーを押すことで,
  • Opera では,Shift キーを押しながら Esc キーを押し,続けてアクセスキーを押すことで,

ホットスポットにアクセスできる。

 ところで,こうして設定されたアクセスキーは,とくに何もしなくともそれとわかるように示されるべきだが,(2005 年 5 月)現在,特別な設定をしないとアクセスキーを自動的に示すことはできない。よって必要ならば,アクセスキーが何であるかを明記しておくとよいだろう。

<p>[<a href="doc07.html" accesskey="n">次へ(N)</a>|<a href="doc05.html" accesskey="p">前へ(P)</a>|<a href="./" accesskey="x">目次へ(X)</a>]</p>

 適切なアクセスキーの指定によって,サイトの使いやすさは向上する。必要な箇所に設定することを心がけたい。