HTML Living Standard  第1部 HTML 5 ハイパーリンク


 

5 ハイパーリンク

WWW では、文書のある部分から、関連するほかの文書・場所へ直接ジャンプし、次々と見ていくことができます。このような機能を持つ文書をハイパーテキストと呼び、関連づけをすることを「リンクを張る」と言ったりします。

HTML では a 要素を使って文中の語句や画像からリンクを形成します。

5.1 アンカー (a)

本文中のリンク情報は a 要素タイプで表現します。アンカー(Anchor)とは「錨」のことですが、何かをつなぎとめるものという一般的な意味もあります。文書のある場所から別の場所へのリンクを、文書と文書をつなぐ錨として表しているわけです。


a 要素

ある部分から、関連するほかの文書・場所へのリンクを指定する。

属性

属性属性値説明必須
hrefURI、#ID名新しく表示する文書や場所リンクする場合は ○
hreflang記述言語
 言語コード一覧
リンク先の文書を記述している言語href がない場合は指定できない
typeMIME タイプ
 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

「参照」と表示し、クリックしたらほかの文書が別のウィンドウに表示されるようにリンクを張りなさい。

表示する文書は、


解答例 (別ウィンドウで開きます)