ハイパーリンク

リンクとアンカーの概説

この節では,HTML(HyperText Markup Language)の重要な特徴の一つである,ハイパーリンクについて概説します。

HTMLは,構造的マーク附けを行ふための "マークアップ言語" である一方,情報リソースの間をむすび附けるための "ハイパーテキスト言語" としての側面も持つてゐます。このむすび附きの機構をハイパーリンク(hyperlink)と呼びます。HTMLのリンクは,ある一つのリソースから他のリソースへと一對一の單方向でむすび附けるシンプルなものですが,それでもウェブ(World Wide Web)が成功した大きな原動力になつてゐます。

たとへば一册に綴ぢられた書籍で考へてみると,頁を "めくる" といふ,線形的(リニア)な動作による參照方法しかありません。また,ある一册の書籍からその外にある參考文獻を探すには,わざわざ書店や圖書館に赴くか,取り寄せる事になります。一方,ウェブ上のハイパーテキストはといふと,一つの場所にゐながら,國境の境を越えて,順序や階層による分類に左右される事もなく,すばやく世界中の情報を得られるのです。

1つのリンク(link)には,アンカー(anchor)と呼ばれる2つの端點と,1つの方向性を持つてゐます。このアンカーといふ概念は,リソースと他のリソースとを繋ぎ止める「錨」をイメージして考案されました。リンクは,文書内の始點アンカーから出發し,終點アンカーを指し示します。終點アンカーは,たとへば畫像,ヴィデオクリップ,サウンド,プログラム,HTML文書自體やその構成となる要素など,あらゆるリソースが考へられます。

リンク先リソースの訪問

リンクに對應する一般的な利用法は,ほかのリソースを取得して,訪問することです。これは一般に,ユーザの操作に據つて,文書内にレンダリングされた始點アンカーを何らかの入力デヴァイスで "アクティヴにする(有效にする)" ことによつて,惹き起こされます。

次のHTML文書の斷片には,2つのリンクアンカーが含まれてゐます。これらは何れも始點アンカーで,一方の終點は "chapter2.html" といふリソース名のHTML文書を,そしてもう一方の終點は "forest.png" といふリソース名のPNG畫像を指し示してゐます:

<body>
…中略…
<p>より詳しい情報は,<a href="chapter2.html">第2章</a>にあります。
また,この<a href="../images/forest.png">魔法の森の地圖</a>もご參照ください。</p>
</body>

銘々の始點アンカー(a要素)はhref屬性により,終點アンカーとなるリソースのURIを指し示してゐます。アンカーおよびリンクは,決して入れ子にはなり得ません。a要素はインライン要素のため,インライン内容しか含められません。ただしa要素自身は除外されます。

始點アンカーのレンダリングは一般に,際立つやうに下線が附いたり,テキスト色を變へて表現されます。音聲ブラウザでは,通常時とは異る聲色にしたり,話す速度を遲くしたりするでせう。これらの表現は,ユーザがリンク先を訪問濟みかどうかに依つて區別されます。

かういつたアンカーは,たとへばマウスやペン型デヴァイス,あるいはその他のポインティング-デヴァイスで "クリック",もしくは "キーボードで入力",場合に依つては "ユーザの聲で指示" など,樣々な操作手段でアクティヴにされ,各リソースに訪問する事ができるでせう。

文書内の終點アンカー

リンクの終點アンカーは,文書全體に對してだけでなく,HTML文書を構成してゐる1つの要素に對してむすび附けても構ひません。その場合,終點アンカーが命名されてゐる必要があり,それを指し示すURIにはその名前が部分識別子として含まれてゐる必要があります。

すなはち著者は,同一文書中にある各々の見出し要素(h1-h6)に終點アンカーを設置して,目次の項目となる始點アンカーからアクセスできるやうな文書内のリンクを設計しても構ひません。たとへば次の文書斷片では,2種類の方法で終點アンカーを生成してゐます:

<h2>目次</h2>
<ul>
  <li><a href="#section1">概説</a></li>
  <li><a href="#section2">背景</a><ul>
  <li><a href="#section2.1">個人的な注意</a></li></ul></li>
  <li>…殘りの目次項目…</li>
</ul>
<h2><a name="section1">概説</a></h2>
<p>…第1章…</p>
<h2><a name="section2">背景</a></h2>
<p>…第2章…</p>
<h3 id="section2.1">個人的な注意</h3>
<p>…第2章第1節…</p>

この例では "section1" と "section2" の終點アンカーは,a要素のname屬性により生成されてゐます。一方の "section2.1" の終點アンカーは,見出し要素自體に對するid屬性の指定により生成されてゐます。この兩者を比較してみると,後者のはうが簡潔でせう。

a要素はインライン要素のため,インライン内容しか含められません。つまり,ブロック内のインライン斷片にしかアンカーを生成できません。しかし對するid屬性はといふと,あらゆる要素の共通屬性のため,ブロックレヴェルの範圍にも指定でき,より柔軟に使用できます。

すなはち,div要素とid屬性を用ゐて,見出しセクション全體をアンカーにする事もできます:

<div id="ToC>
  <h2>目次</h2>
  <ul>
    <li><a href="#section1">概説</a></li>
    <li><a href="#section2">背景</a><ul>
    <li><a href="#section2.1">個人的な注意</a></li></ul></li>
    <li>…殘りの目次項目…</li>
  </ul>
</div>
<div id="section1">
  <h2>概説</a></h2>
  <p>…第1章…</p>
</div>
<div id="section2">
  <h2>背景</a></h2>
  <p>…第2章…</p>
  <div id="section2.1">
    <h3>個人的な注意</h3>
    <p>…第2章第1節…</p>
  </div>
</div>

このやうにマーク附けしておくと,終點アンカーとしての役割のほかにも,何らかの文書處理で "見出しの範圍(div)" として扱へるかもしれません。ただし,このやうな階層化はマーク附けの複雜さを生むので,必然性がなければ簡潔なマーク附けを心がけてください。

User Agentは,部分識別子附きのURIにアクセスする際,まづアクセス對象となる終點アンカーの位置まで文書のレンダリングを濟ませ,その後,その位置に何らかの方法でアクセスするでせう。たとへば "表示域をスクロールさせる","その位置から話し始める" などです。

id屬性によるアンカー

上述のとほりid屬性は,a要素を含むあらゆる要素に指定可能で,アンカーの生成に使用され得ます。

著者は,id屬性とname屬性が,同じ名前空間を共有する事に注意せねばなりません。すなはち,この兩者は共に,同一文書において同一名稱のアンカーを定めてはなりません。次の要素型では,この兩屬性で,文書中で固有となる識別子を指定することが許されます: a,applet,form,frame,iframe,img,map。單一の要素中でこの兩屬性が同時に用ゐられる場合,それぞれの値は同一でなければなりません。

次の例は,同一文書の中でid屬性とname屬性が,同一名稱を重ねて宣言してゐるので,不正です:

<h2 id="section1"><a name="section1">概説</a></h2>

要素の開始タグに同時に出現するid屬性とname屬性は,それぞれの値が同一でなければなりません:

<h2><a id="section1" name="section1">概説</a></h2>

XHTML文書では,name屬性の代りにid屬性を用ゐる必要があります。しかしXHTML 1.0では一般に,同時にname屬性も併記することが推奬されます(後方互換性のため)。XHTML 1.1仕樣では,フォーム-コントロールの要素をのぞくname屬性は廢止されました。

謂はば,name屬性は廢れつつある舊い仕樣であり,その役割はより博い要素で利用できるid屬性へと移行します。

リンクの關聯性

前述の例で示したやうに,リンクのもつとも一般的な用法は,他のリソースを取得することです。

しかし著者は,單に "リンクアンカーをアクティヴにしてリソースを訪問してもらう" 以外の,リソースとの間にある關聯性を表現するリンクも使用できます。このやうな關聯性を表現するリンクは,始點アンカーにおいて1つ以上のリンクタイプを指定することで示します。

a要素あるいはlink要素で定義されるリンクの役割は,rel屬性およびrev屬性で指定されます:

rel="link-types" [CI]
この屬性は,當該文書からhref屬性により指定されるアンカーまでの關係を示します。
値には,空白類文字で區切られたリンクタイプのリストを記述します。
rev="link-types" [CI]
この屬性は,href屬性により指定されるアンカーから當該文書までの逆方向リンクを示します。
値には,空白類文字で區切られたリンクタイプのリストを記述します。

(補足:[CI]――大文字と小文字を區別しないことを意味する。)

たとへばlink要素で定めるリンクに據つて,一聯の文書群における當該文書の位置を示すこともできます。次の例では,"第5章…" と名附けられてゐる當該文書において,他の文書との前後關係を示すためにヘッダ内のリンクに據つて "前章" と "次章" を指し示してゐす:

<head>
  …他のヘッダ情報…
  <title>第5章 HTML文書の表現</title>
  <link rel="prev" href="chapter4.html" title="第4章 適合條件: 必須事項と推奬事項">
  <link rel="next" href="chapter6.html" title="第6章 HTMLの基本データ形式">
</head>

最初のリンクにはリンクタイプに "prev" が,次のリンクにはリンクタイプに "next" が指定されてゐます。これらは,HTML 4仕樣で認定されたリンクタイプです。link要素で指定されたリンクは,文書の本文内容としてカンヴァスにはレンダリングされません。その代りにUser Agentは,ナヴィゲーションツールなどの他の方法でレンダリングするでせう。たとへば視覺系ブラウザでは,GUIのツールバーなどを提供するかもしれません。

參考

これらのリンクがナヴィゲーションに使用されなかつたとしても,ほかの興味深い方法で解釋されるかもしれません。たとへば,一聯のHTML文書群を連續して印刷しようと試みるUser Agentは,このリンク情報を基準にして,正しい順序で印刷を行ふかもしれません。

a要素にも,link要素にも,title屬性を設定してもよく,そのリンク先の概要について補足的な情報を提供できます。この情報はUser Agentに據つて,話されたり,ツールティップとして示されたり,カーソルの變化を惹き起こしたりして,ユーザに傳へられるでせう。

次のやうに,各リンクにタイトルを附加することで,アンカー内容を補足できます:

<body>
…中略…
<p>より詳しい情報は<a href="chapter2.html"
  title="第2章 HTML 4の概説">第2章</a>にあります。
また,文書構造の理解のために<a href="images/tree.png"
  title="PNG畫像;文書ツリーの模式圖;25Kbytes">文書
ツリーの模式</a>もご參照ください。</p>
</body>

しかし著者は,title屬性に頼りすぎず,アンカー内容としても明確に記すべきです。

リンクが指し示すリソースには,樣々な文字符號化方法が用ゐられ得るので,a要素およびlink要素はcharset屬性をサポートしてゐます。この屬性で著者は,リンク先データの文字符號化方法について,User Agentにアドヴァイスを與へることができます。

hreflang屬性は,リンク先リソースの言語情報をUser Agentに提供します。これはlang屬性が當該要素の内容および屬性値の言語情報を提供するのと類似してゐます。link要素のリンクタイプ "alternate" と併用すると,別の言語ヴァーションを提供できます。

この附加的な知識を備へることに據つて,User Agentは,ユーザに對して "役立たず(garbage)" を提示してしまふのを囘避すべきです。"役立たず" を提示してしまふ代りに,User Agentは,文書の正しい提出のために必要なリソースを見つけ出すかもしれません。もし見つけられない場合,HTML 4仕樣では,少くともユーザに對して文書が判讀しがたい旨を警告し,その理由を説明すべきである,としてゐます。

アクセシビリティ

リンクの始點アンカー(href屬性を持つa要素)は,その行先が明確に理解できる樣なテキストであるべきです。

たとへば極端に漠然としてゐる「ここ」,「こちら」,「ここをクリック」,「こちらのサイト」などのテキストを用ゐるべきではありません。これらは特定の入力デヴァイス(たとへばポインティング-デヴァイス)に依存してゐたり,リンク先の情報をまつたくユーザに傳へてゐません。

アンカーの内容は,前後の文脈を讀まなくとも,リンク先にアクセスしなくとも,對象リソースの概略をつかめるやうにすべきです。特に自分の物ではない他所のリソースを參照する場合,リンク元の管理者に敬意を拂ふなら,適切なアンカー内容で紹介すべきです。

つまり,アンカーはリンク先の本質を表したテキスト――たとへば『ハイパーリンクの詳しい利用法』のやうに具體的なもの――にすべきです。著者は,アンカーに使用するテキストを明確にする他に,リンク先を明瞭に説明するやうなtitle屬性を指定しても良いでせう。

同一文書で複數のアンカーに同じテキストを使用してゐる場合,それらは同じリンク先を共有して,一貫性のあるアクセス性を與へるべきです。もしリンク先が異つてしまふなら,a要素の銘々にtitle屬性を指定して,銘々のリンク先を區別できるやうにすべきです。

アンカーの拾ひ讀みと印刷

ユーザはリンクアンカーを拾ひ讀みするかもしれません。特に文書を限られた狹い表示範圍でしか見れない,もしくは全く見れない人々――たとへば合成音聲による讀み上げ,弱視もしくは畫面から遠いための擴大表示,狹い畫面解像度での利用者,視野狹窄の障礙を持つ人などは,文書の概略を知るために,もしくは早くリンクを探すために,アンカー間を移動したり,文書上のリンクをリストにして利用するかもしれません。

關聯するリンクアンカーをひと續きのテキストで竝べる場合,最初のアンカーには導入となる情報を含めておき,それ以降のアンカーにはその内容を補足づける情報を含めてください。かうすることで,リンクアンカーを順序どほりに讀むユーザはその關聯性を知ることができます。

<a href="my-doc.html">この文書のHTML版</a>,
<a href="my-doc.pdf" title="この文書のPDF版">PDF版</a>,
<a href="my-doc.txt" title="この文書のテキスト版">テキスト版</a>

また,ユーザは文書を印刷するかもしれません。たとへば "畫面上のテキストは讀みづらいから",もしくは "出先で讀み返したいから" などの理由が考へられます。リンクアンカーの内容は,印刷した場合であつても文脈が不自然にならぬやうにすべきです。(關聯:生成内容)。

アンカー名の構文

アンカー名とは,終點アンカーとして用ゐられてゐる場合のname屬性もしくはid屬性の値です。

name屬性による名前は,國際符號化文字集合に含まれる任意の文字列を使用できます。一方のid屬性による名前には,ASCIIアルファベット(a〜zA〜Z)で始り,任意の數のa〜zA〜Z,數字(0〜9),ハイフン(-),アンダースコア(_),コロン(:),ピリオド(.)のみを使用できます。つまり,name屬性による命名は自由度が高いのですが,URIの仕樣上,もしくは名前空間の都合上,id屬性の命名規則に合せて置くのが無難です。

id屬性でも,name屬性でも,アンカー名は次の制約に從はねばなりません:

一意性:
ひとつのアンカー名は,文書内で唯一の存在であり,固有な性質でなければならない。
大文字と小文字が異るだけのアンカー名は,同一文書中には出現してはならない。
文字列一致:
部分識別子とアンカー名との比較は,大文字と小文字まで正確に合致させねばならない。

したがつて,次の例は "文字列一致" の點で正しいので,User Agentは合致してゐると判斷します:

<p><a href="#xxx">…</a></p>
…中略…
<p><a name="xxx">…</a></p>

次の例は,名前の相違が大文字と小文字のほかに區別がないため,"一意性" の點で不正です:

<p><a name="xxx">…</a></p>
…中略…
<p><a name="XXX">…</a></p>

次の例は正當なマークアップですが,User Agentがどのやうな擧動になるのかは不定です。User Agentに依つては,これらを(正確ではないが)合致するものとして判斷するかもしれませんし,あるいは合致しないものとして判斷するかもしれません。

<p><a href="xxx">…</a></p>
…中略…
<p><a name="XXX">…</a></p>

HTML 4仕樣におけるSGML宣言を嚴密に解釋するなら,本來アンカー名は大文字に統一すべき,との指摘があります。しかし,現状において既に小文字でも罷り通つてゐるため,大抵のUAでは特に不具合は生じません。(參考:NAMECASE GENERAL YES の意味

文書の關聯性: link要素

link要素は,當該文書と他のリソースとの關聯性を定めるリンクです。この要素は,本文に現れるテキストの文脈として使用されるa要素とは異り,文書のhead要素にしか出現できません。link要素は,内容がない空要素です。出現囘數は問はれません。

つまり,link要素で指定されたリンクは,文書の本文内容としてカンヴァスにはレンダリングされません。その代りにUser Agentは,ナヴィゲーションツールなどの樣々な方法で,關聯情報を傳へるでせう。たとへば,ツールバー領域におけるドロップダウンメニューなど。

參考

次例では文書のhead要素に,複數のlink要素がどのやうに出現し得るのか示します。現在文書は "chapter2.html" です。rel屬性は,"現在文書" から "リンク先文書" までの關聯性を示します。その値の "index","next","prev" については,リンクタイプの節で説明します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>第2章 HTML 4の概説</title>
  <link rel="index" href="../index.html" title="索引">
  <link rel="prev"  href="chapter1.html" title="第1章 HTML 4仕樣書について">
  <link rel="next"  href="chapter3.html" title="第3章 SGMLとHTMLの關係">
</head>
…文書本體…

上述の例のやうに,title屬性に文書タイトルを記しておくと,文書の關聯性に加へて,具體的な概略も知らせられます。

rel屬性およびrev屬性は,相互補完的な役割を果たします:

たとへば,文書A文書Bといふ,文書同士の關係で考へてみませう:

文書Aの中のリンクから,文書Bを見た場合:
<link href="docB" rel="foo" title="文書Bへ">
文書Bの中のリンクから,文書Aを見た場合:
<link href="docA" rev="foo" title="文書Aへ">

上記のふたつのリンクによる關聯性は,まつたく同じ意味になります。

この兩屬性(rel,rev)は,ひとつのlink要素に同時に現れても構ひません。

リンクと檢索エンジン

著者はlink要素を用ゐて,檢索エンジンに對し,次のやうな樣々な情報を提供できます:

以下では,言語情報・メディアタイプ・リンクタイプに據つて,檢索エンジンによる文書處理がどのやうに改善されるのか示します。

次の例では,hreflang屬性(リンク先の言語情報を示す)を用ゐて,檢索エンジンに對し,オランダ語版,ポルトガル語版,フランス語版の所在を示してゐます。フランス語版を示すlink要素のlang屬性は,title屬性の値がフランス語で記されてゐる事を示してゐます。

<head>
<title>The manual in English</title>
<link title="The manual in Dutch"
      type="text/html"
      rel="alternate"
      hreflang="nl"
      href="/manual/dutch.html">

<link title="The manual in Portuguese"
      type="text/html"
      rel="alternate"
      hreflang="pt"
      href="/manual/portuguese.html">

<link title="La documentation en Fran&ccedil;ais" lang="fr"
      type="text/html"
      rel="alternate"
      hreflang="fr"
      href="/manual/french.html">
</head>

次の例では,media屬性に據つて,檢索エンジンに對して印刷版マニュアルの所在を示してゐます:

<head>
<title>參照マニュアル</title>
<link media="print" title="PostScript版のマニュアル"
      type="application/postscript"
      rel="alternate"
      href="/manual/postscript.ps">
</head>

次の例では,檢索エンジンに對して,一聯の文書群における最初となる文書の所在を示してゐます:

<head>
<title>參照マニュアル ―― P. 5</title>
<link rel="start" title="マニュアルの先頭ページ"
      type="text/html"
      href="/manual/start.html">
</head>

著者は以下の認められたリンクタイプを使用して構ひません。ここで述べるリストは慣習的な解釋です。

リンクタイプは大文字と小文字を區別しません。すなはち "Alternate" と "alternate" は等價です。

alternate
リンクが存在してゐる現在文書の代替となる別のヴァージョンを指定する。
stylesheet
外部スタイルシートを參照する。詳細は外部スタイルシートの節を參照のこと。
リンクタイプ "alternate" を併用すると,ユーザが選擇可能な代替スタイルシートを使用できる。
start
文書群の中での最初となる文書を參照する。
檢索エンジンに對して,最初に讀ませたいと著者が想定してゐる文書がどれであるかを傳へる。
next
一聯の續き物とされてゐる文書群の,ひとつ次の文書を參照する。
User Agentは "next(次)" の文書を先讀みしておいて,體感上のダウンロード時間を節約するかもしれない。
prev
一聯の續き物とされてゐる文書群の,ひとつ前の文書を參照する。
同義語である "previous" をサポートするUser Agentもある。
contents
目次として提供される文書を參照する。
同義語である "ToC" (Table of Contentsの略)をサポートするUser Agentもある。
index
現在文書の索引として用意されてゐる文書を參照する。
glossary
現在文書に關係する用語集として用意されてゐる文書を參照する。
copyright
現在文書における著作權の考へを述べた文書を參照する。
chapter, section, subsection, appendix
文書群の中で,それぞれ章,節,小節,附録として扱はれる文書を參照する。
help
ヘルプを提供してゐる文書を參照する。更なる情報,據り所となる情報へのリンクなど。
bookmark
ブックマーク(「しをり」の意)を參照する。これは,長大な文書の中での重要點への入口となるリンクを意味する。title屬性は,ブックマークのレーベル(呼び名)として使はれるかもしれない。各文書でいくつものブックマークが定められてよい點に注目のこと。
補足:これは文書内の重要點とした終點アンカーを,本の頁に挾み込む「しをり」に見立てたものと考へられる。

HTML文書の著者は,HTML 4仕樣で述べられないリンクタイプを定めたい場合もあるでせう。その場合,リンクタイプを定めるのに用ゐる慣例を引き合ひに出すために,プロファイルを用ゐるべきです。詳しくはhead要素に指定されるprofile屬性の概説を參照のこと。

上述のリストでは定められてゐませんが,しばしば rev="made" といふ指定が利用されます。これは主に,著者への聯絡を取るために "電子メール" のクライアントを起動して貰ふことを期待して,href屬性にmailto:スキーム附のアドレスを指定します。次にその例を提示します:

<link rev="made" href="mailto:katsu@ea.mbn.or.jp">

この機能は,實際にいくつかのUser Agent(Lynx,Mozilla Suite,iCabなど)に據つてサポートされてゐます。

メディアタイプ

以下はmedia屬性の値として認められたメディアタイプの一覽です:

screen
印刷ページのやうな區切りを持たない,コンピュータ上の畫面表示。
tty
グリッド線の矩形領域に納まる固定ピッチ文字を使用する出力裝置など。
具體的にはテレタイプ,端末,あるいはディスプレイ能力に制約のあるポータブル機器など。
tv
テレヴィジョン型の機器。一般的には,低解像度,色附き,かつスクロールに制限がある畫面。
projection
映寫機や透明板への印刷など,投影による表現。
handheld
低性能なポータブル機器。典型的なものには,小さな畫面,モノクロ畫面,周波帶域に制約のある機器など。
print
印刷ページの區切りがある不透明な素材への出力。または印刷プレヴューの畫面出力。
braille
點字の觸感をフィードバックする裝置。點字ディスプレイなど。
aural
合成音聲によつて出力するためのソフトウェアや機器。
all
すべてのデヴァイスに當てはまる。

これらのメディアタイプは,link要素のmedia屬性の値として,コンマ區切りのリストで複數指定できます。