<link>要素の活用。

<link>要素の活用・目次。

はじめに。

<link>要素は、まだ実装しているブラウザが少ないとはいえ、これから実装されていきそうな要素です。

ブラウザが実装するようになれば、<link>要素を活用する事でより便利なウェブサイトを構築出来るでしょう。

ここでは、<link>要素を用いる利点と実際の利用方法を解説します。

複数コンテンツを持つサイトを構築したい方は、是非<link>要素を活用してください。

<a>要素によるリンクの問題点。

多くの場合、ウェブサイトは複数のコンテンツからなるものです。

その場合、ページと他のページとの繋がりをどうやって実現すればいいでしょうか。

多くの場合は、ナヴィゲーション用にトップページや前後のページなどへのアンカーを降ろして(<a>要素ですね)実現します。

この方法はどんなブラウザでも利用可能になるという利点はありますが、問題もあります。

すなわち、閲覧者は他のページへ行きたい時は、ページの中から希望ページへのアンカーを捜し出さなければなりません。

特にウェブではスクロールが幾らでも出来るので、場合によってはアンカーが見ている箇所とは全然違う箇所に降ろされているかも知れません。

そうなると、移動するだけでも大仕事になってしまいます(特に携帯電話の場合)。

現状ではこれが常識とはいえ、もっと楽に出来ないものでしょうか。

このための機構として旧くから仕様にて指定されているのが、<link>要素なのです。

<link>要素はCSSのスタイル定義ファイルをリンクするためのものとして解説しましたが、本来の意味はウェブページと他のリソースとの関連付けというものです。

<link>要素の実装の現状。

現状では最大手のインターネットエクスプローラが<link>要素に関してスタイル定義ファイルのリンク以外を一切サポートしていないため、書くだけ無駄だという発言が罷り通るという有り様ではあります。

しかし、オペラ 7では<link>要素によるナヴィゲーション機構を不完全とはいえ実装しており、徐々に<link>要素の良さが認知されつつあります。

<link>要素を活用する利点。

ブラウザが「<link>要素はページ全体と他のリソースを関連付ける要素である」という仕様を忠実に従って実装すれば、そのブラウザで閲覧する方はかなりの恩恵を受ける事になるでしょう。

例えば、

等とすれば、閲覧者はページのどこを見ていても、好きなときに<link>要素で示された他のリソースを手際良く参照する事が可能になります。

前述の通り、既にオペラは実装し始めております。これから、<link>要素のサポートが常識になるかも知れません。

また、ブラウザ以外にも検索エンジンのクローラ等が<link>要素をサポートする可能性もあります。

<link>要素をサポートしたクローラは、<link>要素で示された関連ページを一緒にクロールしてくれたり、検索エンジンの結果画面で関連ページとして案内してくれるといった処理が期待出来るでしょう。

<a>要素の本来の使い方。

一応お断りしておきますが、制作者は全てのハイパーリンクを<link>要素で実現して、<a>要素を排除せよと申しているのではありません。

先にも書いた通り、<a>要素は文書中の特定のスポットを他のリソースと関連付けるためのものであり、そのような目的には<a>要素は<link>要素より便利だからです。

例えば、専門用語など、文章中の特定の語句に対する情報をリンクするような場合は、その語句だけをアンカーとする<a>要素でのハイパーリンクの方が却って便利です。

<link>要素の活用方法。

<link>要素は旧くからある要素とはいえ、長く実装される事の無かった要素のため、制作する人によって様々な解釈があると予想されます。

ここでは、制作者が良く使う書き方(すなわち、制作者の解釈)を解説します。

トップページの場合。

トップページは、たいていメニューを兼ねるため、メニューの対象となっているコンテンツを<link>要素でも明示しておきましょう。

この場合、一般のコンテンツから見てトップページは基点となりますので、「rev="start"」属性で示すといいでしょう。

具体的には以下のようになるでしょう。

<head>
        …
    <link rel="next" title="本サイトについて" href="About.html" />
    <link rel="appendix" title="更新案内" href="WhatIsNew.html" />
    <link rev="start" title="自己紹介" href="AboutMe.html" />
    <link rev="start" title="作品紹介" href="MyWorks/index.html" />
    <link rev="start" title="今後の予定" href="Schedule.html" />
    <link rel="appendix" title="日記" href="http://www.uso-blogs.ne.jp/uso800/weblog.cgi" />
    <link rel="appendix" title="掲示板" href="http://www.uso-bbs.ne.jp/uso800/bbs.cgi" />
    <link rel="bookmark" title="リンク集" href="Links.html" />
        …
    </head>

コンテンツページの場合。

コンテンツページの場合は、関連ページ，ページのタテの関係とヨコの関係を記述して行けばよいでしょう。

リンク集や更新案内、掲示板などは関連ページとして用意しておきましょう。

これらはトップページの場合と殆ど同じとなるでしょう。

タテの関係

タテの関係とは、トップページからコンテンツの表紙、項目の表紙、…と言った階層関係の事です。

多くの場合、以下のように記述すればよいでしょう。

トップページ
「rel="start"」属性を当てる。
コンテンツの表紙
「rel="contents"」属性を当てる。
項目トップ
「rel="chapter"」属性を当てる。
下位項目
「rel="section"」属性を当てる。
更に下位の項目
「rel="subsection"」属性を当てる。
ヨコの関係

一方ヨコの関係とは、当該ページの前後のページとなります。

但し、タテの関係で示したページは改めて前後のページとする必要はありません。

具体的には前のページは「rel="prev"」属性を、続きのページは「rel="next"」属性をそれぞれ当てます。

また、続きページと言えるページが複数あると考えられる場合は、リンク先から見て前のページと見做して「rev="prev"」を使ってもいいでしょう。

具体的な書き方。

具体的には以下のようになるでしょう。

<head>
        …
    <!-- 関連ページ -->
    <link rel="appendix" title="更新案内" href="../../WhatIsNew.html" />
    <link rel="bookmark" title="リンク集" href="../../Links.html" />
    <link rel="appendix" title="日記" href="http://www.uso-blogs.ne.jp/uso800/weblog.cgi" />
    <link rel="appendix" title="掲示板" href="http://www.uso-bbs.ne.jp/uso800/bbs.cgi" />

    <!-- タテの関係 -->
    <link rel="start" title="トップページ" href="../../index.html" />
    <link rel="contents" title="作品紹介" href="../index.html" />
    <link rel="chapter" title="カラーイラスト" href="http://www.marguerite.jp/Nihongo/Features/index.html" />
    <link rel="section" title="平成18年カラー作品" href="Color2006.html" />

    <!-- ヨコの関係 -->
    <link rel="prev" title="平成18年 1月カラー作品" href="Jan2006.html" />
    <link rel="next" title="平成18年 3月カラー作品" href="Mar2006.html" />
        …
    </head>

その他の豆知識。

rel属性とrev属性は併用する事も可能です。

<link>要素のrel属性とrev属性は併用する事も可能です。

このため、異なる階層のコンテンツを同じページに纏めて記述するのも便利になります。

例えば、あるページから見てrel="contents"に該当するページも、rel="chapter"に該当するページも、トップページはそれぞれから見てrev="○○"という位置付けになっているかも知れません。

こういう場合に、双方を記述する事でトップページからの位置付けが同じでありながら、階層の異なるページを纏めて記述する事が可能になります。

また、rel属性値やrev属性値に独自の値を用いても構いません。

rel属性とrev属性は<a>要素にも利用出来ます。

<a>要素で表されるアンカーでも、やはりリンク先とリンク元に密接な関係があるでしょう。

<a>要素でも、その関係を明示するのにrel属性やrev属性を使う事が出来ます。

rel属性とrev属性には独自の値を持たせる事も出来ます。

仕様の上ではrel属性やrev属性に独自の値を適用するには、<head>要素にprofile属性で独自のURLを指定する事になっておりますが、実際にはこのような事をしなくても独自の値を利用する事は可能です。

実際、以下のような非公式な値が使われております。

<a>要素によるリンクも併用しましょう。

今まで述べた通り、<link>要素はページ全体と他のリソースを関連付けるもので、このようなリンクは全て<link>要素だけで済ませるのが理想です。

しかしながら、実際には<link>要素を実装していないウェブブラウザがまだまだ主流であり、よって<link>要素だけでは利用者の便宜に応えているとは言えません。

そこで、なるべく利用しやすい箇所に<a>要素によるアンカーも下ろしておきましょう。

ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0には古いブラウザを使った場合でも正しく操作出来るように、暫定的なアクセシビリティの解決策をとる事が求められております。

この項目には<link>要素については書かれておりませんが、理想だけに囚われて旧いブラウザへの配慮を怠るのは、却ってアクセシビリティの理念を否定する行為と言えるのです。

中にはブラウザの実装が遅れているのが悪いと言って、<link>要素でのページリンクに<a>要素によるページリンクを併用しない者もいますが、閲覧者の事を考えるとただの独善としか思えません。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com