HyperText Markup Language link element.
link要素は、該当のドキュメントを別のリソースと関連付けます。そのリソースのリンク先を href属性を使って指定します。そして、そのリソースのタイプを rel属性で指定します。そして、そのリソースの MIMEタイプを type属性を使って指定します。
この要素は、head要素の中で使います。link要素の代表的な利用シーンとしては、スタイルシートの読み込みが挙げられるでしょう。
スタイルシートの例
<link rel="stylesheet" type="text/css" href="style.css">
上記のスタイルシートの場合、type属性を指定しなくても構いませんので、
type コンテンツ属性を指定しない場合のスタイルシートの例
<link rel="stylesheet" href="style.css">
と、記述しても間違いではありません。
link {
display: none;
}
rel属性にはスタイルシートを表す "stylesheet" の他にも多数のタイプが規定されています。詳しくは別途説明したいと思います。ここでは、代表的な例を紹介します。
rel コンテンツ属性のマークアップ例
<link rel="index" href="sitemap.html" title="索引">
<link rel="search" href="search.html" title="検索">
<link rel="help" href="help.html" title="ヘルプ">
<link rel="first" href="story1.html" title="最初">
<link rel="prev" href="story4.html" title="前へ">
<link rel="next" href="story6.html" title="次へ">
<link rel="last" href="story9.html" title="最後">
<link rel="up" href="index.html" title="親階層">
<link rel="author" href="profile.html" title="作成者">
link要素の rel属性を使って関連ドキュメントをマークアップする事で、これに対応したブラウザでユーザビリティが向上します。
例えば、Opera 10 には、link要素の rel属性のいくつかに対応しています。Opera 10 のツールバーの「表示(V)」→「ツールバー」→「ナビゲーションバー」をクリックすると、ナビゲーションバーが表示されます。
もし、関連のページが存在していれば、積極的に利用したいものです。
hreflang属性は、rel属性に "alternate" をセットした上で、言語コードを指定します。例えば、もし日本語のページだけでなく、英語とフランス語のページも用意されているなら、次のようにマークアップします。
hreflang コンテンツ属性の利用例
<link rel="alternate" href="/en/index.html" hreflang="en" title="English">
<link rel="alternate" href="/fr/index.html" hreflang="fr" title="Français">
hreflang属性に指定するコードは、IETF BCP47 "Examples of Language Tags" に従わなければいけません。
フランス語であれば "fr"、ドイツ語なら "de"、日本語なら "ja" となります。また国を指定した言語の場合、例えば、米国英語であれば "en-US" となります。これまで使われてきた言語コードと同じですので安心してください。
media属性は、rel属性にセットされた値によって意味が異なります。
rel属性に "alternate" がセットされている場合は、その href属性は、media属性に指定されたメディア向けに用意された該当のドキュメントの代替ページへのリンクを表します。
メディアごとの代替ページ
<link rel="alternate" media="print" href="item.pdf" title="印刷用">
<link rel="alternate" media="tv" href="item_tv.html" title="TV用">
rel属性に "styleSheet" がセットされている場合は、その href属性は、media属性の指定されたメディア向けに適用すべきスタイルシートのリンクを表すことになります。
メディアごとにスタイルシートを指定する
<link rel="stylesheet" media="screen" href="style.css" type="text/css">
<link rel="stylesheet" media="print" href="print.css" type="text/css">
<link rel="stylesheet" media="tv" href="tv.css" type="text/css">
sizes属性は、rel属性に "icon" がセットされている場合にのみ利用可能で、アイコンのサイズを指定します。アイコンのサイズは、横幅と縦幅のピクセルを小文字の x でつなげた文字列で表します。
sizes コンテンツ属性の利用例↓
<link rel="icon" href="favicon.png" type="image/png" sizes="16x16">