HTML の link 要素によるナビゲーション

作成日 : 2009-12-29
最終更新日 :

HTML での link 要素

HTML では link 要素を適切に使うことによって、 ユーザーエージェント (UA)に関連文書を表示させるようにすることができる。 ここでのユーザーエージェントは、ブラウザとほぼ同一の意味なので、以下ブラウザで統一する。 link 要素の使い方であるが、たとえば<head>~</head>領域に次のように書く。

<link rel="next" href="chapter2.html">

上記記述は、本文書の次の文書が chapter2.html であることをリンクによって示している、という意味である。 以降、上記のrel="***" で記されている *** をリンクタイプと呼ぶ。 また、上記リンクがブラウザ固有の機能として表示される領域を、ナビゲーションバーと呼ぶ。

ブラウザごとによる表示の違い

link 要素記述をしても、ナビゲーションバーを表示できるブラウザは限られる。

そんな link 要素によるナビゲーションではあるが、Seamonkey で可能な記述を示した。記述は下記サイトを参考にした。
https://developer.mozilla.org/ja/docs/Web/HTML/Link_types
https://html.spec.whatwg.org/multipage/links.html#linkTypes

現在の文書とリンク先の関係
リンクタイプ意味する関係備考
alternatehreflang 属性があるときは別の言語のページへのリンクであることを示す
author ドキュメントの作者。メール URI でも、ホームページの作者紹介のページでもよい。
first 最初の文書へのリンク begin や start を使うのは誤り
helpページ全体について詳細なヘルプを提供するリソースへのリンクであることを示す
index ドキュメントに対する索引
last 最後の文書へのリンク end を使うのは誤り
licenseライセンス条項copyright は誤り
next 次の文書へのリンク
prev 前の文書へのリンク
searchOpenSearch プラグイン
up階層構造での上位文書へのリンク

次の表は、
https://developer.mozilla.org/ja/docs/Web/HTML/Link_types
には記載されていないタイプであったり、現在は推奨されない種類のリンクタイプを掲げた。

リンクタイプ意味する関係備考
contents ドキュメントの目次
glossary ドキュメントの用語集
made ドキュメントの作者。メール URI でも、ホームページの作者紹介のページでもよい。 この場合は rel 属性ではなく rev 属性になる。HTML 5 では廃止。
toc ドキュメントの目次。 toc は Table Of Contents の略。
top サイトの始まりのページ。home が使われることもある

現在対応しているブラウザ

Lynx

link 要素が記述されていれば、そのリンク要素が画面の先頭に表示される。

SeaMonkey

Firefox と並び、Mozilla 系であるが、標準でサイトナビゲーションバーを備えている。 ただし、デフォルトでは表示されない。トップメニューの表示→表示/隠す→サイトナビゲーションバーから、 <常に表示>か<必要なときだけ表示>にすれば表示される。デフォルトは<表示しない>である。 バージョン 2.53.13 までは表示できていたが、バージョン 2.53.14 になってからは突然リンク先を示さなくなった。 書かれていてもディム化(灰色化)されていて操作できない。

現在は対応していない(あるいは対応不明の)ブラウザ

Opera

現行の版 (91.0) ではナビゲーションバーは表示されない。

以前の Opera (10.10) では、表示→ツールバー→ナビゲーションバーを設定することにより、次の 13 種類のナビゲーションバーが表示された。

ホーム(home)、索引(index)、目次(contents)、検索(search)、用語集(glossary)、ヘルプ(help)、最初(start)、前へ(prev)、次へ(next)、最後(end)、 親階層(up)、著作権(copyright)、作成者(rev="made")、

さらに前はこれらに加えてニュースフィードというボタンもあったが、 これは現在の版では独立したメニューになっているので削除されている。 ニュースフィードが独立したことはよいのだが、rel="alternate" には RSS だけではなく、 他の言語の参照や、スタイルシートの変更なども含まれている。 私の不勉強ゆえの無知かもしれないが、 現在の Opera は RSS 取り込みのインターフェースと、 スタイルシートの変更のインターフェースは分かれている。 スタイルシートを変更するには、トップメニューの表示→スタイルの最下部にあるので、そこから変更できる。 なお、スタイルシート変更以外の alternate 属性、たとえば言語の切り替えなどは不明である。

iCab

Macintosh 専用のブラウザとして、知る人ぞ知る面白いブラウザ。 標準で下記のナビゲーションツールバーを表示してくれる。
index, contents, next, prev, start, end(last), made, author, contents, toc, glossary
現在 iCab は使っていないのでわからない。

Firefox のアドオン

Firefox 本体では link 要素による関連文書の表示ができない。 以前はアドオンを使うとナビゲーション・ツール・バーが表示されていた。

Site Navigation Bar 2.0.1, 3.0

https://addons.mozilla.org/ja/firefox/addon/1949
日本語版はない。 特に問題なく使っていたが、Firefox 7.0.1 には対応していないので、現在は使っていない。

Link Widgets 1.7.0.1

https://addons.mozilla.org/ja/firefox/addon/link-widgets/
こちらは Firefox 7.0.1 で問題なく動くが、その後の開発が止まり、現在は Firefox のアドオンとしては登録されていない。 そのため使っていない。

まりんきょ学問所での使用状況

私のホームページは恐ろしいことに 5000 ページを超えているが、 なるべくどのページにも何らかの link 要素を付けたいと思っている。 しかし、付けられる link 要素とそうでない要素があるので、 そのあたりは分別したいと考えている。

top と up

まず、どのページでも必要なのが、top リンクタイプである。 ここは、固定で http://www.ne.jp/asahi/music/marinkyo/index.html.?? (?? は言語タイプ、以降も同様)とすればよい。 それから、階層化が厳格にできているページであれば、up リンクタイプも容易に設置できる。 現在、階層化が厳格にできているページとあいまいなページがあるので、確定させたい。

first, prev, next, last

次に、first, prev, next, last をどうするかという問題がある。 最初からページの構成を確実に行なっているべきなのだが、 ページを加えたり合体させたりするとリンクの前後関係が乱れる。 毎月書く日記ものであれば比較的 prev と next については決まっているが、 first と last をどのようにするかが悩ましい。 今のところ、続きものを書くときには、first には antauxparolo.html.?? (エスペラントで前書きの意味)、 last には postparolo.html.?? (エスペラントで後書きの意味)として、 決め打ちで書く規則を決め、試行している。

contents, glossary, index

このあたりになると悩みは更に深くなる。contents は目次であり、 今のところ up と同義で使っているが、厳密な意味では異なる。 例を挙げて説明する。次のような目次で本を書くとしよう。 見ての通り、章(大分類)、節(中分類)、項(小分類)からなる。

 生鮮三品:目次(contents.html)
 1. 魚介 (seafood.html)
  1.1 魚類 (fish.html)
   1.1.1 マグロ (tuna.html)
   1.1.2 ブリ (yellowtail.html)
   1.1.3 イワシ (sardine.html)
  1.2 貝類 
   1.2.1 アサリ
   1.2.2 シジミ
   1.2.3 ハマグリ
 2. 青果
  2.1 野菜
   2.1.1 キュウリ
   2.1.2 トマト
   2.1.3 ハクサイ
  2.2 果物
   2.2.1 ミカン
   2.2.2 リンゴ
   2.2.3 イチゴ
 3. 精肉
  3.1 生肉
   3.1.1 牛肉
   3.1.2 豚肉
   3.1.3 鶏肉
  3.2 製肉
   3.2.1 ハム
   3.2.2 ベーコン
   3.2.3 ウィンナー

上記が書かれているページは目次、 すなわち contents.html である。従って、個別の項が書かれているページからは contents リンクタイプとして contents.html ページにリンクされる。 しかし、個別の項から up リンクタイプでリンクされるページは contents.html ではなく、直上の階層にあるページである。 たとえば上記の例であれば、tuna.html から up リンクタイプでリンクされるページは、 fish.html であり、seafood.html でもなく、contents.html でもない。 これは、contents リンクタイプと up リンクタイプを分ける必要がある例である。 なお、私のホームページでは、 このような多階層化に対応して up と contents を分ける、ということはしていない。

リンクタイプに glossary が置かれると、どのようなページを用意すればよいかますます困る。 上記の例では、専門用語に関する解説が行なわれるだろう。たとえば、次のような用語辞典が考えられる。

ゼイゴ

アジなどの魚にみられる、尾の近くでウロコが変形した突起列。ノコギリのように鋭い。 ゼイゴ部分を食べると口を痛めるので、 下ごしらえのときに取り除くことがほとんど。

ハツ

食肉、たとえばウシやニワトリ、ブタなどの心臓のこと。焼肉、焼き鳥などの食材として使われる。

用語辞典があると、読者にとって参照の便がよく、読みやすい。 プログラミング言語 Perl の開発者 Larry Wall は、 自著で皮肉交じりの用語集を作っている。他にも、書籍で参考にすべきものがあるだろう。 私は、中小企業診断士(休止中)勉強のページ配下のページの一部は、 glossary として用語集へのリンクを指定している。 しかし、すべてのページで満足するような glossary を置くことは困難だ。

索引 (index) にいたってはお手上げである。書籍を作る編集者はよく索引を作れるものだと感心する。 索引に使われることばは、自身が直感で決めるしかないだろう。 全文検索エンジン Namazu により切り出された単語 NMZ.w を参考にすることはできるかもしれない。 私は、フォーレの部屋索引を作りつつあるが、 未だに完成していない。

help, search

help もどのような内容を用意すべきか悩ましい。 一度行なったのは、ブラウザからまりんきょのページが見えないというクレームに対して、 答えたページを help のリンク先にしていたが、 他にも困ったことがあるかもしれない。

search のリンク先は、 今のところ全文検索エンジンNamazuを使った 検索ページに決め打ちしている。 私は自前で作っているが、Google などを利用するのも一つの手である。

Author, License

Author (作者情報)のところは、 従来 <link rev="made" href="メールアドレス"> が推奨されてきた。 私も以前はそうしてきたのだが、 メールアドレスが知られてしまい、スパムメールが大量に来ることになってしまい、 遅まきながらこのメールアドレスは消した。その代わり、rel="author" の形に変え、さらに href のあて先に http による自己紹介を置いている。 メールのあて先はここでは記さないが、画像の形でいくつかのページに貼り付けている。 目の不自由な方には申し訳ない。

著作権については、License ではなく、以前の Copyrights の形で使っている。 具体的には著作権のページへのリンクにして決め打ちしている。

Bookmarks, Other Version

ブックマーク(Bookmark)は複数付けられる。複数付けたいときは、title 属性によって名前を変えればよい。 私はリンク集を1つだけ付けている。

alternate は悩ましい (Firefox では Other Version として表示される)。 私は、他言語でページを用意したときに alternate を使う。

なぜ link 要素によるナビゲーションに固執するのか

link 要素は W3C で規定されているにもかかわらず、 実装されているブラウザが少ないために無視される状況が続いている。 私がしつこいまでにこの link 要素に固執するのは、未だにホームページのタグを手打ちしている、 古い人間だからだろう。 そして、「服の表ではなく、裏地に凝るのが通人」という、どこかで聞いた文句を自分勝手に解釈して、 link 要素をしこしこ整えている。

link 要素が入っているサイト

先の事情もあり、link 要素が入っているサイトはほとんどない。 私が調べた限りは、こんなところだ。ただし、ブログは除く。

調べてみて分かったことは、HTML の link 属性を紹介してあるページであっても、 その属性を紹介ページ自身で使っている例はほとんどなかった、ということである。 「紺屋の白袴」ということばが浮かぶ。

参考リンク

まりんきょ学問所コンピュータの部屋マーク付け言語手習い > HTML の link 要素によるナビゲーション


MARUYAMA Satosi