WWW では、文書のある部分から、関連するほかの文書・場所へ直接ジャンプし、次々と見ていくことができます。このような機能を持つ文書をハイパーテキストと呼び、関連づけをすることを「リンクを張る」と言ったりします。
5.1 アンカー (a)
本文中のリンク情報は a 要素タイプで表現します。アンカー(Anchor)とは「錨」のことですが、何かをつなぎとめるものという一般的な意味もあります。文書のある場所から別の場所へのリンクを、文書と文書をつなぐ錨として表しているわけです。
a 要素
ある部分から、関連するほかの文書・場所へのリンクを指定する。
属性
属性 | 属性値 | 説明 | 必須 |
href | URI、#ID名 | 新しく表示する文書や場所 | リンクする場合は ○ |
hreflang | 記述言語 言語コード一覧 | リンク先の文書を記述している言語 | href がない場合は指定できない |
type | MIME タイプ MIME タイプ一覧 | リンク先の MIME タイプ |
rel | 関係性 リンクタイプ一覧 | 外部ファイルとの関係性 |
media | メディア メディアタイプ一覧 | 対象とするメディア |
target | リンク先の内容を表示するウィンドウ(フレーム) |
_blank | 新規のウィンドウに表示 |
_self | 現在のウィンドウ(フレーム)に表示 |
_parent | 親ウィンドウ(フレーム)に表示 |
_top | ウィンドウ全体に表示 |
名称 | 指定のウィンドウ(フレーム)に表示 |
例えば、同じサイトにあるファイルにリンクするには次のように相対パスで記述します。a 要素の書かれているファイルが基準になります。
記述例
<a href="index.htm">目次</a> 同じフォルダの index.htm へのリンク
<a href="../index.htm">目次</a> 親フォルダの index.htm へのリンク
ただし、ヘッダ情報に base 要素が書かれている場合は、それが基準になります。
記述例
<base href="http://www.foo.com/html/">
~
<a href="index.htm">目次</a> http://www.foo.com/html/index.htm へのリンク
<a href="../index.htm">目次</a> http://www.foo.com/index.htm へのリンク
また、http://~ で始まる絶対パスを指定して、他のドメイン名のファイルにリンクすることもできます。
記述例
<a href="http://www.foo.com/html/index.htm">目次</a> http://www.foo.com/html/index.htm へのリンク
HTMLを書いてみよう 1-5-1
「参照」と表示し、クリックしたらほかの文書が表示されるようにリンクを張りなさい。
表示する文書は、
解答例 (別ウィンドウで開きます)
リンク先に文書内の特定の要素に id 属性を使用して名前を付けておき、a 要素の href 属性値に #ID名 という形式で指定することで、その場所に移動することもできます。
記述例
<a href="#abc">ABC</a> 同じ文書の abcと名付けた場所へのリンク ─┐
<a href="index.htm#abc">ABC</a> index.htm の abcと名付けた場所へのリンク ─┼─┐
~ │ │
<p id="abc">むにゃむにゃ</p> ここに移動←┘ │
index.htm
<h1 id="abc">もごもご</h1> ここに移動←┘
HTMLを書いてみよう 1-5-2
「詳細」と表示し、クリックしたらほかの文書の特定の場所が表示されるようにリンクを張りなさい。
表示する文書は、
解答例 (別ウィンドウで開きます)
また、target 属性を指定することで、リンク先をどのように開くかを指定することができます。
記述例
<a href="index.htm" target="_blank">目次</a> 新しいウィンドウ(タブ)に表示する
<a href="index.htm" target="xxx">目次</a> xxx という名前のウィンドウ(タブ)に表示する
HTMLを書いてみよう 1-5-3
「参照」と表示し、クリックしたらほかの文書が別のウィンドウに表示されるようにリンクを張りなさい。
表示する文書は、
解答例 (別ウィンドウで開きます)