ハイパーテキストとリンク - 仕様書に見るHTML(2)

1.1 WWWの3つの技術

改めて「WWWって何？」と問われると、なかなか簡単には答えられないと思いませんか？　仕様書では、WWWとは「情報リソースのネットワーク」だとした上で、この情報を可能な限り多くの人に提供するための3つの基本技術をあげています。

1. A uniform naming scheme for locating resources on the Web (e.g., URIs).
2. Protocols, for access to named resources over the Web (e.g., HTTP)
3. Hypertext, for easy navigation among resources (e.g., HTML).

(2.1)

リソースの所在を具体的に示す名前付け方法（URI）、そのリソースをやり取りするための手順（HTTP）、そしてハイパーテキストを実現する記述方法（HTML）、この3つがWWWを支えています。WWWとは「URI, HTTP, HTMLを使って多様な情報リソースを利用可能にするネットワーク」ということができるでしょう。

1.2 HTMLの役割

WWWの定義に続き、仕様書はHTMLの位置づけについてもはっきりと説明してます。

To publish information for global distribution, one needs a universally understood language, a kind of publishing mother tongue that all computers may potentially understand. (2.2)

グローバルな情報発信のための共通言語としてのHTML。これがすべてのコンピュータにきちんとできるようにするには、誰もが仕様に基づいた正しいHTMLを書くことが大切です。自分の画面できちんと表示できればよいのではなく、ユニバーサルに理解可能な情報記述こそがHTMLの目的なのです。

さまざまな環境の利用者が共有できる情報発信のために、仕様書はHTMLを記述する際の3つの基本的な考え方を示しています。

2.1 リンクとアンカー

HTMLのリンクは、「起点と終点の2つのリソースに一方向のつながりを与えるもの」です。

A link has two ends -- called anchors -- and a direction. The link starts at the "source" anchor and points to the "destination" anchor, which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.). (12.1)

終点のアンカーはウェブ上の「リソース」で、必ずしもHTML文書でなくても構いません。当たり前といえばその通りですが、リンクを定義する際に「HTML文書を呼び出すもの」と説明してしまいがちです。ウェブの「リソース」は幅広い意味を持つものであることを、再確認しておきましょう。

2.2 a要素タイプと内容モデル

ハイパーリンクを実現するのは、お馴染みのa要素タイプ。いつもお世話になっているから、使い方はもう完璧ですか？　最初に、12.2の定義の冒頭にある内容モデルを確認してみます。

<!ELEMENT A - - (%inline;)* -(A) >

ここでは「開始・終了タグともに省略不可で、内容には%inline;で実体宣言されたものを0回以上持つことができる。ただし、内容には子孫にわたってA要素を含めることはできない」という定義が示されています（前回取り上げた要素タイプ宣言の読み方を思い出してください）。%inline;の部分は（ウェブ版の仕様書では）リンクになっているので辿っていくと、これは文字列、もしくはEM, STRONG, IMGなどの、本文の「行内」に登場する要素タイプであることが分かります。

では、次のアンカーは正しい書き方でしょうか？

<a href="..."><h3>アンカーについて</h3></a>

h3要素タイプは%inline;に含まれないので、a要素の内部に記述することはできません。この場合は

<h3><a href="...">アンカーについて</a></h3>

という具合に、アンカーをh3要素の内容にしておく必要があります。よく間違をみかける点なので、注意してください。

仕様書7.5.3では、HTMLの本文を構成する要素を「ブロックレベル要素」と「インライン要素」に分類し、文書の大きな構造をつくるのが前者、テキストのレベルをマークアップするのが後者であることを説明しています。この考え方を理解しておくと、内容モデルに関する混乱が減るでしょう。

DTDで定義されている%inline;と%block;を構成する要素タイプ。インライン要素の内容モデルに%block;に属するものが含まれることはない。ブロックレベル要素の内容モデルは、DIVのように別の%block;を含むことができるものもあるが、Pや%heading;のように%inline;しか使えないものもある。

2.3 フラグメントとアンカーの名前付け

周知の通り、ハイパーリンクは文書内の特定の部分をターゲット（終点アンカー）とすることもできます。この場合、文書を示すURIのうしろに'#'を加え、さらにアンカーを識別するためのフラグメント識別子（JIS用語では素片識別子）を加えます。

http://somesite.com/html/top.html#section2

文書中でのフラグメントは、ターゲットとする要素に名前を付けることで示します。要素に名前を付けるためには、汎用の属性であるid属性を用います。

<H2 id="section2">Section Two</H2>

上記のURIを起点アンカーのhref属性に記述すれば、top.htmlのこの見出し部分へのリンクが実現します。

この説明を読んで、「あれ？　違うのでは」と思われた方も多いかも知れません。従来、終点アンカーに名前を付けるためには、a要素にname属性を与えていました。

<H2><A name="section2">Section Two</A></H2> （古い例）

これも確かに正しいHTML4のアンカー記述方法です。古いタイプのブラウザでは、こちらの方法でないとアンカーが認識されないこともあります。

ただし、HTMLがXHTMLへと発展していく過程で、このname属性は廃止されることになりました（2001年5月末に勧告されたXHTML1.1では、すでにname属性は使えません）。過渡期である現在は、この名前付けをどうするかはなかなか難問です。

現時点で、できるだけ適用範囲が広い名前付けとするためには、a要素にid属性とname属性を併記しておくことになります。

<H2><A name="section2" id="section2">Section Two</A></H2>

両属性は同じ名前リストを用いるので、同一文書の異なる要素にそれぞれを使って同じ名前を付けることはできません。

<H2 id="section2"><A name="section2">Section Two</A></H2>

という書き方はできないので注意してください。

現在改訂作業が進んでいるISO-HTMLでも、ユーザーガイドに「ID属性とNAME属性を併記することを推奨する」という一文が追加されるようです。面倒な記述法ですが、これを当面の標準と考えておくのがよさそうですね。

2.4 名前付けのルール

名前の付け方、特にid属性に関しては、細かいルールが定められています。

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). (6.2)

日常生活でIDというと番号を割り当てることが多いため id="1234" という属性を記述しそうになりますが、上記の通り、idの値はアルファベットで始めなければなりません。また、日付に基づいたIDにしようとして id="d2001/07/21" と書いてしまうと、'/'という文字が認められていないため、このidもエラーということになります。

HTMLの場合、name属性にはこのような制限はありませんので、比較的自由な名前付けが可能です。ただし、id属性と併記したり、将来XHTMLに移行することを考えると、name属性にも同じ制約があると考えておく方が無難でしょう。

名前は、文書中で唯一のものを与えなければなりません。これに関連して、名前の大小文字に関しては次のような約束があります：

• Uniqueness: Anchor names must be unique within a document. Anchor names that differ only in case may not appear in the same document.
• String matching: Comparisons between fragment identifiers and anchor names must be done by exact (case-sensitive) match.

(12.2.1)

前者は、大小文字が違うだけの名前は唯一性の規則に反すると述べています。後者は、アンカーを確認するときは大小文字も考慮するので、フラグメント識別子は厳密に書くようにという規則です。うっかりミスをしないよう、ふだんからアンカー名は小文字に統一するなどのルールを決めておくとよいでしょう。

2.5 HTMLでの大文字と小文字の区別

仕様書で定義されている属性には、それぞれ値が大小文字を区別するかどうかが[CS][CI]などとして記載されています。たとえば、a要素タイプのname属性は

name = cdata [CS]

となっていて、大小文字を区別する(Case Sensitive)ことが分かります。定義が[CI]であればCase Insensitiveを意味し、大小文字は区別されません。

HTMLのタグを記述するときに、要素タイプ名や属性名（属性値ではなく）は大小文字を区別しないことになっています。仕様書では要素タイプ名は大文字、属性名は小文字に統一して記述されていますが、これは可読性を高めるためで、どちらの書き方も許容されています。

ただし、新しい規格であるXHTMLでは、全ての要素タイプ、属性が小文字で定義され、しかもXMLのルールに従って大小文字が区別されるので、タグでは小文字を使わなければなりません。将来の移行を考えると、HTML4に従った文書もタグには小文字を使っておく方が賢明だと言えます。

2.6 利用しやすいリンクの記述

さて、話をリンクに戻します。アンカー要素タイプの定義には様々な属性が並んでいますが、中でも冒頭で述べた「誰もがアクセスできるウェブ」という観点で重要なものを確認してみましょう。

リンク先は異なる言語の情報である場合が少なくありません。こうした文書の言語情報は、前回説明したようにHTTPヘッダやmeta要素で提供されますが、アンカーにもhreflang、charset属性を記述しておくことで、リンク先の文書が何語のどのような符号化によるものかをあらかじめブラウザに教え、文字化けなどを防ぐことができます。

Armed with this additional knowledge, user agents should be able to avoid presenting "garbage" to the user. Instead, they may either locate resources necessary for the correct presentation of the document or, if they cannot locate the resources, they should at least warn the user that the document will be unreadable and explain the cause. (12.1.5)

ユーザビリティを考えると、リンクのアンカーは文中に設けず、段落とは独立して注釈のようにする方が分かりやすいとされます。文中の語句は、本来アンカーとしての使いやすさを考慮しているわけではなく、前後の流れから言葉が選ばれているため、どこにリンクしているのかが不明確になりやすいからです。このような場合は、前回も取り上げたtitle属性を用いて、補助情報としてリンク先を具体的に示しておくとよいでしょう。

「誰もがアクセスできる」という点で注目しておきたいのは、accesskey属性です。マウスを使わない環境では、たくさんのアンカーの中から目指すひとつを選択するのはなかなか手間のかかるもの。重要なリンクにはaccesskey属性でショートカットキーを指定することで、これらの利用者にもスムーズな移動手段を提供することができます。

同様の補助機能として、tabindex属性を用いてタブキーによる選択の順序を指定することもできます。ただし、不用意に選択の順序を入れ替えると利用者の直感に反して混乱を招く危険があるので、よく考えて使うようにするべきでしょう。これら2つの属性は、リンクのアンカーだけでなく、フォームの入力コントロールにも指定することができます。

2.7 href属性と特殊な文字'&'

この節の最初で示したとおり、リンク先の終点アンカーはプログラムであっても構いません。たとえば、文中のキーワードを始点アンカーとし、リンク先を辞書プログラムにしてそのキーワードを検索、結果を表示させることもできます。このようなリンクを記述する場合、プログラムに渡す問い合わせ文字列に含まれる '&' の扱いに注意してください。

The URI that is constructed when a form is submitted may be used as an anchor-style link (e.g., the href attribute for the A element). Unfortunately, the use of the "&" character to separate form fields interacts with its use in SGML attribute values to delimit character entity references. (B.2.2)

'&'という文字は実体参照を示す記号なので、フォームのフィールドを区切るためには

<A href="http://host/?x=1&y=2">.

と、 '&' を用いなければならないのです。href属性に限らず、属性値で '&' '<' '>'という特別な文字を使う場合は文字参照としなければなりません。もちろん、本文のテキストでもこれらの文字は文字参照で表現することは言うまでもありませんね。

2.8 name属性はinput等のnameとは別のもの

意外に混乱しやすいのが、a要素タイプのname属性とinputなどのフォームコントロールのname属性です。前者はid属性と同じ名前空間に属し、文書内で唯一の名前を付けるために用いられます。

The id and name attributes share the same name space... It is permissible to use both attributes to specify an element's unique identifier for the following elements: A, APPLET, FORM, FRAME, IFRAME, IMG, and MAP. (12.2.3)

一方、後者はプログラムにデータを送るための名前を付けるに過ぎず、form要素の中でのみ意味を持ちます。

A control's "control name" is given by its name attribute. The scope of the name attribute for a control within a FORM element is the FORM element. (17.2)

同じname属性値が複数のフォーム内のinput要素で使われていても構いませんし、これらのname属性値とアンカーの名前が重複しても問題ありません。フォームコントロールのname属性は、XHTML1.1になっても残されているので、安心して使ってください。

3.1 文書間の関係を示すlink要素タイプ

文書どうしのリンク関係はlink要素として示します。これは文書自体に関する情報（メタ情報）の一種なので、head要素内に記述します。仕様書のlink要素タイプの定義セクションでは、最初に次のような例が挙げられています。

<HEAD>
  <TITLE>Chapter 2</TITLE>
  <LINK rel="Index" href="../index.html">
  <LINK rel="Next"  href="Chapter3.html">
  <LINK rel="Prev"  href="Chapter1.html">
</HEAD>

文書を結びつけるといってもその役割はさまざまなので、rel属性に「リンクタイプ」を記述することでどんな働きをするかを示します。この例で言えば、第2章の「Next」なら次の第3章、などという具合ですね。代表的なリンクタイプは、仕様書の6.12に列挙されています。リンク先のリソースはa要素と同様、href属性で示します。

ところで、a要素ならリンク先の文書にジャンプするなどはっきりした働きがありますが、link要素で「Next」記されていても、どんな役に立つのかぴんとこないかも知れません。

Although LINK has no content, it conveys relationship information that may be rendered by user agents in a variety of ways (e.g., a tool-bar with a drop-down menu of links). (12.3)

実際、いくつかのブラウザは、これらのlink要素を使ってナビゲーションツールを画面に表示してくれます。また、itemscope="" itemprop="alternate"というリンクタイプを用いて、別言語バージョンや印刷用バージョンを示したり、itemprop="start"によって一連の文書の出発点をユーザエージェント（ロボット）に教えてあげるという例も仕様書に示されています。

まだ十分活用されているとは言い難いlink要素ですが、多くの文書がメタ情報としてのリンクを記述するようになると、検索エンジンのロボットなどもそれに対応し、より便利な検索が可能になってくるはずです。今すぐ効果がなくても、読者のみなさんはぜひ積極的にlink要素を採用していってください。

3.2 link要素とmedia属性

今のところlink要素タイプのもっともポピュラーな用途は、外部スタイルシートを文書に結びつけるというものでしょう。ここでmedia属性を指定すると、ユーザエージェントは自分の環境に適したスタイルシートを選択して使うことができるようになります。

<LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css">

指定できるメディアタイプは 6.13 Media descriptors においてscreen, print, tv, handheld, auralなど9種類があげられています。新しいデバイスはどんどん登場していますから、これ以外の値も使われることになるでしょう。セクション6.13では、

media="screen, 3d-glasses, print and resolution > 90dpi"

という架空の属性値の例で、未知の値は無視することを示しています。ところがCSSの次期バージョンでは、この例を発展させる形で、

media="tty and (min-width: 80ch)"

という詳細なメディア指定方法が検討されているのです。仕様書の場合、単なる例でもこんな展開を見せることがあるので、あなどれませんね。