目次
HTMLは、修飾付きテキストや構造化文書を実現するための、多くの慣習的出版語彙を提供している。この中で、他の多くのマーク付け言語とHTMLとを分かつ最大の特徴は、HTMLがハイパーテキスト及び対話的文書の機構を供えている点である。 この節では、ハイパーテキスト構造の基礎であるリンク(ハイパーリンクあるいはWebリンクとも呼ぶ)を概説する。 リンクとは、あるWebリソースから他のリソースへの繋がりのことである。 単純な概念ではあるが、リンクは、Webを成功に導く原動力のひとつとなってきた。
1つのリンク には、アンカー と呼ばれる2つの端点と、1つの方向性とがある。 リンクは、始点側アンカーから出発し、終点側アンカーを指し示す。終点側アンカーは、例えば画像、ビデオクリップ、サウンドバイト、プログラム、HTML文書、HTML文書中の1要素など、どんなWebリソースであってもよい。
リンクに対応するデフォルトの動作は、他のリソースを取得することである。 この動作は一般的に、リンクを選択すること(マウスでクリックする、キーボードで入力する、など)によって引き起こされると期待される。
次のHTML断片には、2つのリンクが含まれる。一方の終点側アンカーは「chapter2.html」という名のHTML文書で、もう一方の終点側アンカーは「forest.gif」というファイル名のGIF画像である。
<BODY> ...中略... <P>より詳しい情報は、<A href="chapter2.html">第2章</A>にあります。 また、この<A href="../images/forest.gif">魔法の森の地図</A>もご参照ください。 </BODY>
マウスでクリックする、キーボードで入力する、声で命令する、などによって上記のリンクをアクティブにすることで、ユーザは各々のリソースを訪問できる。 ここで、各始点側アンカーのhref属性が、終点側アンカーのアドレスをURIで指定している点に、注意されたい。
リンクの終点側アンカーは、HTML文書中の1つの要素であってもよい。 この終点側アンカーは、アンカー名を命名されていなければならず、またこれを指し示すURIにはその名が部分識別子 として含まれていなければならない。
HTML文書中の終点側アンカーは、A要素( name属性で命名される)によっても、また他の要素(id で命名される)によっても、指定できる。
従って例えば、著者は、同じ文書にあるH2要素やH3要素などの見出し要素に対して各項目がリンクしている目次を作ることもできる。 A要素を使って終点側アンカーを生成する場合、次のように書ける。
<H1>目次</H1> <P><A href="#section1">概説</A><BR> <A href="#section2">背景</A><BR> <A href="#section2.1">個人的な注意</A><BR> ...残りの目次項目... ...文書の本文... <H2><A name="section1">概説</A></H2> ...第1章... <H2><A name="section2">背景</A></H2> ...第2章... <H3><A name="section2.1">個人的な注意</A></H3> ...第2章第1節...
見出し要素自体をアンカーにすることで、上と同じ効果を実現できる。
<H1>目次</H1> <P><A href="#section1">概説</A><BR> <A href="#section2">背景</A><BR> <A href="#section2.1">個人的な注意</A><BR> ...残りの目次項目... ...文書の本文... <H2 id="section1">概説n</H2> ...第1章... <H2 id="section2">背景</H2> ...第2章... <H3 id="section2.1">個人的な注意</H3> ...第2章第1節...
前述の例で示したように、リンクの最も一般的な用法は、他のWebリソースを取得することである。しかし、著者は、単に「関連リソースを訪問するにはこのリンクをアクティブにしよう」というだけでない形のリソース間の関係性を表現するリンクを、文書に挿入し得る。 そうした、他の関係性を表現するリンクでは、始点側アンカーにおいて、1つ以上のリンク形式が指定される。
A要素あるいはLINK要素で定義されるリンクの役割は、rel属性及び rev属性で指定される。
例えば、LINK要素で定めるリンクによって、一連の文書の中での当該文書の位置を示し得る。 次の例は、「第5章」と名付けられている文書にあるリンクが、前章と次章を指し示している。
<HEAD> ...他のヘッダ情報... <TITLE>第5章</TITLE> <LINK rel="prev" href="chapter4.html"> <LINK rel="next" href="chapter6.html"> </HEAD>
最初のリンクのリンク形式は「prev」で、2番目のは「next」である (認定されたリンク形式のうちの2つ)。 LINK要素が指定するリンクは、文書の内容としてはレンダリングされず、ユーザエージェントは、ナビゲーションツールなど、他の方法でレンダリングするであろう。
仮にこのリンクがナビゲーションのために用いられなかったとしても、興味深い方法で解釈される可能性がある。例えば、一連のHTML文書群を単一の文書として印刷しようとするユーザエージェントは、このリンク情報を、正しく繋がった文書に整形する際の基準として用いるであろう。 更に、検索エンジンに役立つリンクの用法について、後述する。
HTMLの要素や属性には、例えばIMG要素や FORM要素など、他のリソースへのリンクを生成するものが幾つかあるが、ここではLINK要素及びA要素が生成するリンクとアンカーについて述べる。 LINK要素は文書のヘッダにしか出現できず、A要素は文書の本体にしか出現できない。
href属性が設定されているA要素は、リンクの始点側アンカーを定め、これがユーザによってアクティブにされるとWebリソースが取得される。 始点側アンカーはA要素インスタンスの所在地であり、終点側アンカーはWebリソースである。
取得されたリソースは、ユーザエージェントによって様々な方法で取り扱われるであろう。同じユーザエージェントウインドウ内で新しいHTML文書を開いたり、別のウインドウで新しいHTML文書を開いたり、当該リソースを扱うための新しいプログラムを起動したり、等である。 A要素は、テキストや画像などの内容を持つので、ユーザエージェントは下線を引くなどしてリンクが存在することを示すような方法で内容をレンダリングするであろう。
name属性あるいはid属性が設定されているA要素は、他のリンクの終点となり得るアンカーを定める。
著者は、name属性とhref属性を、1つの A要素インスタンスに同時に設定してもよい。
LINK要素は、当該文書と他のリソースとの間の関係性を定義する。 LINK要素には内容はないが、定義された関係性をレンダリングするユーザエージェントもあるであろう。
A要素にもLINK要素にも title属性を設定してよく、そのリンクの内容についての情報を追加できる。 この情報は、ユーザエージェントによって、話されたり、ツールチップとしてレンダリングされたり、カーソル画像の変化を引き起こしたりするであろう。
そこで、各リンクに表題を加え、前述の例を次のように増強できる。
<BODY> ...中略... <P>より詳しい情報は、<A href="chapter2.html" title="第2章へ">第2章</A>にあります。 <A href="./chapter2.html" title="第2章を見る">第2章</A>。 また、この<A href="../images/forest.gif" title="魔法の森のGIF画像">魔法の森の 地図</A>もご参照ください。 </BODY>
リンクは【当該文書とは】異なる文字符号化方法で符号化された文書を指し示すことがあり得るので、A要素とLINK要素はcharset属性をサポートしている。 この属性と使うと、著者は、リンク先データの符号化方法についてユーザエージェントに情報を与えることができる。
hreflang属性は、リンク先リソースの言語情報をユーザエージェントに提供する。これはlang属性が当該要素の内容及び属性値の言語情報を提供するのと同様の働きである。
これらの付加情報を備えることで、ユーザエージェントは、ユーザに「ゴミ」を見せないようにできる必要がある。ゴミを見せてしまう代わりに、ユーザエージェントは、文書の正しいプレゼンテーションのために必要なリソースを見つけるか、見つけられない場合には少なくともユーザに対して文書が読めないことを警告しその理由を説明すべきである。
<!ELEMENT A - - (%inline;)* -(A) -- anchor --> <!ATTLIST A %attrs; -- %coreattrs, %i18n, %events -- charset %Charset; #IMPLIED -- char encoding of linked resource -- type %ContentType; #IMPLIED -- advisory content type -- name CDATA #IMPLIED -- named link end -- href %URI; #IMPLIED -- URI for linked resource -- hreflang %LanguageCode; #IMPLIED -- language code -- rel %LinkTypes; #IMPLIED -- forward link types -- rev %LinkTypes; #IMPLIED -- reverse link types -- accesskey %Character; #IMPLIED -- accessibility key character -- shape %Shape; rect -- for use with client-side image maps -- coords %Coords; #IMPLIED -- for use with client-side image maps -- tabindex NUMBER #IMPLIED -- position in tabbing order -- onfocus %Script; #IMPLIED -- the element got the focus -- onblur %Script; #IMPLIED -- the element lost the focus -- >
開始タグ: 必須,、終了タグ: 必須
属性定義
別途定義がある属性
各A要素は、1つのアンカーを定義する。
著者は、アンカーを1つも指定しないA要素、すなわち、href属性も name属性もid属性も指定されていないA要素を、生成してもよい。 これらの属性の値は、後にスクリプト によって設定できる。
次の例では、 A要素がリンクを定めている。 始点側アンカーは「W3CのWebサイト」というテキストであり、終点側アンカーは「http://www.w3.org/」である。
W3Cについて、より詳しくは <A href="http://www.w3.org/">W3CのWebサイト</A>をご参照ください。
このリンクは、World Wide Web Consortiumのホームページを指し示している。 ユーザがこのリンクをアクティブにすると、ユーザエージェントはリソース、この場合はHTML文書、を取得する。
ユーザエージェントは一般に、リンク箇所が目立つように 、下線を引くとか明暗を反転させるなどしてレンダリングする。 実際にどういうレンダリングになるかはユーザエージェント依存である。 レンダリングは、ユーザが当該リンクを既に訪れているかどうかによって異なり得る。 上記リンクの可能な視覚系レンダリングは、次のようなものであろう。
W3Cについて、より詳しくはW3CのWebサイトをご参照ください。 ~~~~~~~~~~~~~~
ユーザエージェントに対してリンク先ページの文字符号化方法を明示するには、次のように charset属性を設定する。
W3Cについて、より詳しくは <A href="http://www.w3.org/" charset="ISO-8859-1">W3CのWebサイト</A>をご参照ください。
次の例では、「one.html」ファイルに「anchor-one」と名付けたアンカーを定めるものとする。
...アンカーの前のテキスト... <A name="anchor-one">ここは"anchor one"の位置である。</A> ...アンカーの後のテキスト...
ここでは「ここは"anchor one"の位置である」というテキストを囲うアンカーを生成している。通常、 A要素の内容は、そのA要素が単にアンカーを定めているにすぎない場合は特別なレンダリングにはならない。
アンカーを定義したので、同じ文書あるいは他の文書から、そこへリンクすることができる。アンカーを指し示すURIは、「#」記号に続くアンカー名(部分識別子)を含む。 そうしたURIの例を、次に示す。
従って、「one.html」と同じディレクトリにあるファイル「two.html」で定めるリンクは、上述のアンカーを次のように参照する。
...リンクの前のテキスト... より詳しくは、 <A href="./one.html#anchor-one">anchor one</A>を参照のこと。 ...リンクの後のテキスト...
次の例のA要素は、href属性によるリンクの指定と、name属性による命名済アンカーの生成を、同時に行っている。
休暇から戻りました! これは <A name="anchor-two" href="http://www.somecompany.com/People/Ian/vacation/family.png"> 湖畔での家族写真 </A>です。
この例は、異なる形式のWebリソース(PNG画像)へのリンクを含んでいる。このリンクをアクティブにすると、画像リソースがWebから取得される必要がある。(そして、表示するよう設定されていたならば表示される。)
注意。 ユーザエージェントは、空のA要素が生成するアンカーも発見できるべきだが、発見できないユーザエージェントもある。例えば、次のHTML断片で示すような「空アンカー」を発見できないユーザエージェントもあろう。
<A name="empty-anchor"></A> <EM>...中略...</EM> <A href="#empty-anchor">空アンカーへのリンク</A>
アンカー名は、アンカーとして用いられている場合のname属性及びid属性の値である。 アンカー名は、次の規則に従わねばならない。
従って、次の例は文字列一致の点で正しいので、ユーザエージェントは合致していると判断しなければならない。
<P><A href="#xxx">...</A> ...中略... <P><A name="xxx">...</A>
不正な例:
次の例は、大文字小文字以外に区別がないので、一意性の点で不正である。
<P><A name="xxx">...</A> <P><A name="XXX">...</A>
次の例は正当なHTMLだが、ユーザエージェントの挙動は定義しない。ユーザエージェントによっては、これを合致すると過って判断するものもあろうし、合致しないと判断するものもあろう。
<P><A href="#xxx">...</A> ...中略... <P><A name="XXX">...</A>
アンカー名は、ASCII文字のみに限る必要がある。 より詳しくは、附属書のURI属性値の非ASCII文字の項目を参照されたい。
A要素で定めるリンク及びアンカーは、入れ子にしてはならない。すなわちA要素は、他のA要素を内容に含んではならない。
DTDが LINK要素を空要素であると定めているので、LINK要素もまた、入れ子にはなり得ない。
id属性は、A要素を含むあらゆる要素の開始タグで、アンカーの生成に用い得る。
次の例は、H2要素をアンカーにするためのid属性の用法を示す。 このアンカーは、A要素からリンクされている。
詳細は<A href="#section2">第2節</A>で得られる。 ...中略... <H2 id="section2">第2節</H2> ...中略... <P>詳しくは、前述の<A href="#section2">第2節</A>を 参照されたい。
次の例は、id属性で、終点側アンカーを命名している。
休暇から戻りました! これは <A id="anchor-two">湖畔での家族写真</A>です。
id属性とname属性は、同じ 名前空間 を共有する。 これはつまり、同一文書では、両属性が、あるアンカーに同じ名前を定めることができないということを意味する。 次の要素においては、両属性で、文書中で固有となる識別子を指定することが許される。 A、APPLET、FORM、FRAME、 IFRAME、IMG、及びMAP要素である。 単一要素中で両属性が用いられる場合、各々の値は同一でなければならない。
不正な例:
次の例は、同一文書中で、各属性が同じ名前を重ねて宣言しているので不正なHTMLとなっている。
<A href="#a1">...</A> ... <H1 id="a1"> ...中略... <A name="a1"></A>
次の例は、ある要素の開始タグに同時に出現するid属性とname属性とは、属性値が同一であらねばならないことを示す。
<P><A name="a1" id="a1" href="#a1">...</A>
HTML DTDの規定により、name属性は文字参照 を含み得る。 従って、Dürstは正当なname属性値であり、Dürstも正当である。 一方、id属性は、文字参照を含み得ない。
取得不能なリソースや識別不能なリソースへのリンクは、エラーである。このエラーの処理はユーザエージェントによって様々であろうが、次の挙動を推奨する。
<!ELEMENT LINK - O EMPTY -- a media-independent link --> <!ATTLIST LINK %attrs; -- %coreattrs, %i18n, %events -- charset %Charset; #IMPLIED -- char encoding of linked resource -- href %URI; #IMPLIED -- URI for linked resource -- hreflang %LanguageCode; #IMPLIED -- language code -- type %ContentType; #IMPLIED -- advisory content type -- rel %LinkTypes; #IMPLIED -- forward link types -- rev %LinkTypes; #IMPLIED -- reverse link types -- media %MediaDesc; #IMPLIED -- for rendering on these media -- >
開始タグ: 必須、終了タグ: なし
別途定義がある属性
この要素は、リンクを定める。 A要素とは異なり、文書のHEAD要素にしか出現できない。 ただし何度でも出現し得る。 LINK要素は内容を取らないが、例えばリンクのドロップダウンメニュにおけるツールバーなど、ユーザエージェントによって様々にレンダリングされるであろう、関係性の情報を伝える。
次の例は、文書のHEAD要素に、複数のLINK定義がどのように出現できるかを示す。 当該文書は「Chapter2.html」である。 rel属性は、当該文書とリンク先文書の関係性を指定する。 その値の"Index"、"Next"、"Prev"については、リンク形式の節で説明する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>第2章</TITLE> <LINK rel="Index" href="../index.html"> <LINK rel="Next" href="Chapter3.html"> <LINK rel="Prev" href="Chapter1.html"> </HEAD> ...文書本体...
rel属性とrev属性は、相互補完的な役割を果たす。 rel属性は順方向リンクを指定し、rev属性は逆方向リンクを指定する。
文書AとBで考えよう。
文書A: <LINK href="docB" rel="foo">
上記は、下記と全く同じ意味である。
文書B: <LINK href="docA" rev="foo">
両属性は、同時に指定できる。
LINK要素が外部スタイルシートにリンクしている場合、type属性はスタイルシート言語を指定し、media属性は意図される出力メディアを指定する。 ユーザエージェントは、使用中の機器に適用されるスタイルシートのみをネットワークから取得することで、時間を節約できる。
出力メディア形式については、スタイルシートの項に説明がある。
著者は、LINK要素を用いて検索エンジンに対し、次のようなものを含む様々な情報を提供してもよい。
以下の各例は、言語情報や出力メディア形式情報をリンク形式情報と組合わせることで、検索エンジンによる文書の取扱いがどのように改善されるかを示す。
次の例では、hreflang属性を用いて、検索エンジンに対し、オランダ語版、ポルトガル語版、アラビア語版の所在を示している。 アラビア語版マニュアルでのcharset属性の用法に注意されたい。 また、フランス語版を指し示すLINK要素のlang属性が、title属性値がフランス語であることを示す点にも注意されたい。
<HEAD> <TITLE>The manual in English</TITLE> <LINK title="The manual in Dutch" type="text/html" rel="alternate" hreflang="nl" href="http://someplace.com/manual/dutch.html"> <LINK title="The manual in Portuguese" type="text/html" rel="alternate" hreflang="pt" href="http://someplace.com/manual/portuguese.html"> <LINK title="The manual in Arabic" type="text/html" rel="alternate" charset="ISO-8859-6" hreflang="ar" href="http://someplace.com/manual/arabic.html"> <LINK lang="fr" title="La documentation en Français" type="text/html" rel="alternate" hreflang="fr" href="http://someplace.com/manual/french.html"> </HEAD>
次の例では、検索エンジンに対して印刷版のマニュアルの所在を示している。
<HEAD> <TITLE>参照マニュアル</TITLE> <LINK media="print" title="PostScript版のマニュアル" type="application/postscript" rel="alternate" href="http://someplace.com/manual/postscript.ps"> </HEAD>
次の例では、検索エンジンに対して、文書群における最初のページの所在を示している。
<HEAD> <TITLE>参照マニュアル ―― P. 5</TITLE> <LINK rel="Start" title="マニュアルの最初のページ" type="text/html" href="http://someplace.com/manual/start.html"> </HEAD>
より多くの情報が、附属書の検索エンジンによるWebサイトの索引づけを助けるの項にある。
<!ELEMENT BASE - O EMPTY -- document base URI --> <!ATTLIST BASE href %URI; #REQUIRED -- URI that acts as base URI -- >
開始タグ: 必須、終了タグ: なし
HTMLでは、外部の画像、アプレット、フォーム処理プログラム、スタイルシート等へのリンク及び参照は、常にURIで指定される。 相対URIは、様々なところから得られる基本URIによって解決される。 BASE要素を使うと、著者は文書の基本URIを明示的に指定すること ができる。
BASE要素は、存在する場合は、HTML文書のHEAD要素において、外部リソースを参照している他のどの要素よりも前に出現しなければならない。 BASE要素が指定するパス情報は、当該文書のURIに対してのみ影響を持つ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>当社の製品</TITLE> <BASE href="http://www.aviary.com/products/intro.html"> </HEAD> <BODY> <P>当社の<A href="../cages/birds.gif">鳥篭</A>を ご覧になったことはございますか? </BODY> </HTML>
ここにある相対URI 「../cages/birds.gif」は、次のように解決される。
http://www.aviary.com/cages/birds.gif
ユーザエージェントは、相対URIを解決する際に、[RFC1808]の3に従って基本URIを判断しなければならない。 次に、特にHTMLに対する [RFC1808]の適用方法を示す。
ユーザエージェントは、次の優先順に従って基本URIを判定しなければならない。優先順位が高いものから列挙する。
更に、OBJECT要素とAPPLET要素は、BASE要素の値より優先する属性を定義する。 各要素特有のURI関連情報は、各々の定義を参照されたい。
注意。 Linkヘッダを定義するバージョンのHTTPでは、ユーザエージェントはこのヘッダを文書中のLINK要素と同等に扱うべきである。 [RFC2616]が定めるHTTP 1.1には、Linkヘッダフィールドは含まれない(19.6.3参照)。