最近ウチの会社の中の人も書いていました、Web サイトのナビゲーションとしてよく使われる 「パンくずリスト」 （Topic Path なんて言い方もしますね） ですが、マークアップの仕方はどういう方法がいいとか、そもそもパンくずリストって必要なの？ なんて話まで、最近よく目にする気がします。
個人的にパンくずリストはサイト ID （ロゴなどですね） に対するトップページへのリンク設定同様の慣習みたいな感覚で、すべての人とは言わないまでも一定の認知はされていると考えていますので、サイト構築の際は基本的に要件に含めるようにしています。
で、今回はパンくずリストが必要か？ とか、パンくずリストのマークアップはどのような方法が妥当か？ みたいなのは置いておいて、「各ページの関係性を示す」 という本来の目的に対して、パンくずリストのような視覚的な記述とは別に link 要素を使用したナビゲーションついて考えてみたいと思います。
link 要素というと外部スタイルシートを読み込むのに使用したりしますので、普段から使っているかと思いますが、もともと link 要素は各文書ファイル間の関係性を示すために用いる要素ですので、本来パンくずリストのようなナビゲーションは link 要素として記述するのがマークアップ的には自然だったりします。
ただし、ブラウザの実装がなかなか微妙で、link 要素によるナビゲーションを活用できるブラウザはまだまだ少ないだけでなく、一般的な認知度も相当低いので、仮に実装されていても使われないでしょうねってことで今のところ理想論止まり。なので、今回のエントリーもあくまでこういう考え方もあるよといった感じで参考までにしていただければと思います。
まず、最初におさらいですが、link 要素は下記のように定義されています。（HTML4.01 DTD）
<!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 -- >
よく使うのが外部スタイルシートを読み込む際のこんな記述。（XHTMLの場合）
<link rel="stylesheet" href="style.css" type="text/css" />
おなじみですね。順方向リンクを示す rel 属性を使用して、「この文書から見た stylesheet は style.css で、そのファイルの文書タイプは text/css ですよ」 と書いているわけです。ある意味ナビゲーションです。
「stylesheet」 も含めて rel / rev 属性値として下記のリンクタイプ （LinkTypes） が定義されています。
- index - 当該文書の索引
- contents - 当該文書の目次
- next - 当該文書の次の文書
- prev - 当該文書の前の文書
- start - 文書群の中の最初の文書
- alternate - 当該文書の代替文書
- stylesheet - 外部スタイルシート
- glossary - 当該文書に関連する用語集
- copyright - 当該文書の著作権表示
- chapter - 文書群中の章となる文書
- section - 文書群中の節となる文書
- subsection - 文書群中の小節となる文書
- appendix - 文書群の中の附属文書
- help - 当該文書のヘルプ
- bookmark - 当該文書に設定されたしおり
また、link 要素には逆方向リンクを示す rev 属性も使用しますが、rev 属性のみで使用できるリンクタイプとしては、
- made
が定義されています。 なんていうのも使われます。
2月7日 追記
リンクタイプ 「made」 は定義されたリンクタイプではないです。定義済みと思い込んでた。失礼しました。
では、実際に文書間のナビゲーションとして使用する場合の記述ですが、下記のような記述になります。
<link rel="start" href="index.html" title="この文書の最初のページはこちらです" /> <link rel="prev" href="prev.html" title="この文書の1つ前のページはこちらです" /> <link rel="next" href="next.html" title="この文書の1つ後のページはこちらです" /> <link rel="contents" href="contents.html" title="この文書を含む一連の文書の目次ページはこちらです" /> <link rel="alternate" href="print.html" title="この文書の印刷用バージョンはこちらです" />
ちなみに、link 要素なので head 要素内に記述することになりますね。同じような記述を当サイトでも個別エントリーページに行っていますが、link 要素をナビゲーションとして表示する機能を実装したブラウザなら、下記のように表示できます。ちなみに画像は Opera 9 での表示例です。
ただ、定義済みのリンクタイプのみだと 「1つ上の階層」 などといった細かい指定ができません。で、どうするかというと、profile を使用してリンクタイプを独自定義することで対処する方法を考えてみます。
HTML の仕様では、meta 要素の name 属性値、 link 要素の rel / rel 属性値などを profile （プロファイル） を指定することで独自に拡張することができるようになっていて、例えば rel 属性値に上の説明で挙げた定義済みリンクタイプ以外を記述する際は、そのリンクタイプが何を表すのかと示す 「profile」 を head 要素の profile 属性に指定すればよいことになっています。
profile の書式自体に厳格な規定はなく、通常の (X)HTML 文書として、「このリンクタイプはこういう意味」 といった説明を記述しておけば問題ありません。 （本当は RDF などで書くのがいいのかもしれませんが）
例えば、
<h1>Profile for (X)HTML link types</h1> <dl> <dt>uplevel</dt> <dd>Link target represents the type of "directory above" of the document</dd> <dt>home</dt> <dd>Link target represents the type of "home page" of the website</dd> </dl>
のように説明を記述した文書を用意し、その文書の場所を
<head profile="http://example.com/profile/">
のように指定してあげれば仕様上の要件は満たします。
これをちゃんと解釈して、ナビゲーションのようにわかりやすく表示してくれるブラウザがあれば （さらにそれが普及して一般化すれば）、とってもステキな感じなんですが、今のところお目にかかったことはありません。残念ながら......
ということで、ごく基本的なところでしたが、ご参考まで。
