このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

リンクタイプ

記事May 1st,2016
July 7th,2020
関連付けるファイルとの関係を示す“rel”属性の値として指定するリンクタイプについて
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

rel”属性

サンプルコード

外部スタイルシートであることを示す
<link rel="stylesheet" type="text/css" href="style.css">

代替文書(翻訳版)を示す
<link rel="alternate" href="en/sample.html" hreflang="en">

代替文書(翻訳版)へのリンク
<a href="en/sample.html" rel="alternate" hreflang="en">リンク</a>

rel”属性は現在の文書から見たリンク先との関係を示します。

属性値はリンクタイプを利用します。

使用できる要素

rel”属性

要素 説明
<a> 現在の文書から見たリンク先との関係
<area> 現在の文書から見たリンク先との関係
<link> 現在の文書から見たリンク先との関係
<form> 現在の文書から見たリンク先との関係

link”要素ではrel”属性は必須属性です。

a”要素area”要素form”要素では“rel”属性はリンク先の文書と現在の文書との関係性を参考情報として伝えます。

rev”属性

rel”属性とは逆にリンク先から見た現在の文書との関係を示す“rev”属性がa”要素link”要素の属性として定義されていましたが、現行の仕様であるHTML Living Standardでは廃止されており、使用することはできません。

リンクタイプ

リンクタイプとは?

rel”属性の値はあらかじめ定義されている“リンクタイプ”を使用して指定します。リンクタイプは文書と他の文書、もしくは文書と外部リソースの関係を表します。

リンクタイプごとに指定できる要素が決められており、それ以外の要素に指定してはいけません。また、リンクタイプは空白文字で区切ることで複数指定することができます。

リンクタイプの一覧

HTMLの仕様で定義されているリンクタイプ

リンクタイプ 説明 指定できる要素 “body-ok”
alternate リンク先は現在の文書の代替文書 <link> <a>
<area>
No
authorHTML5で追加 リンク先は著者情報 <link> <a>
<area>
No
bookmark リンク先は最も近い祖先セクションへのパーマリンク <a>
<area>
-
canonicalHTML Living Standardで定義 リンク先が類似する文書の中で最も推奨される文書 <link> No
dns-prefetchHTML Living Standardで定義 リンク先のDNSによる名前解決を事前に行う <link> Yes
externalHTML5.1で追加 リンク先は現在の文書があるウェブサイトの外部 <a>
<area>
<form> -
help リンク先は詳細なヘルプを提供する文書 <link> <a>
<area>
<form> No
iconHTML5で追加 リンク先は現在の文書を表すアイコン <link> No
licenseHTML5で追加 リンク先はライセンス情報を説明する文書 <link> <a>
<area>
<form> No
manifestHTML Living Standardで定義 リンク先はウェブアプリマニフェスト <link> No
modulepreloadHTML Living Standardで定義 リンク先のモジュールスクリプトを先行して読み込む <link> Yes
next リンク先は一連の文書の中で現在の文書の次の文書 <link> <a>
<area>
<form> No
nofollowHTML5で追加 リンク先は現在の文書の著者が推奨するものではない <a>
<area>
<form> -
noopenerHTML5.1で追加 リンク先を新しいブラウジング・コンテキストで開き、リンク先が現在の文書へアクセスできないようにする <a>
<area>
<form> -
noreferrerHTML5で追加 リンク先を読み込む時に現在の文書のURLを含むリファラーを送信しない <a>
<area>
<form> -
openerHTML Living Standardで定義 リンク先を新しいブラウジング・コンテキストで開いた時にリンク先が現在の文書へアクセスできるようにする(暗黙的に“rel="noopener"”が適用されるのを防ぐ) <a>
<area>
<form> -
pingbackHTML Living Standardで定義 リンク先は現在の文書のピンバックを扱うピンバックサーバー <link> Yes
preconnectHTML Living Standardで定義 リンク先への接続を事前に確立する <link> Yes
prefetchHTML5で追加 リンク先を事前に取得する <link> Yes
preloadHTML Living Standardで定義 リンク先を先行して読み込む <link> Yes
prerenderHTML Living Standardで定義 リンク先を事前に取得してレンダリングする <link> Yes
prev リンク先は一連の文書の中で現在の文書の前の文書 <link> <a>
<area>
<form> No
searchHTML5で追加 リンク先現在の文書と関連する文書内を検索するための機能 <link> <a>
<area>
<form> No
stylesheet リンク先は現在の文書に適用する外部スタイルシート <link> Yes
tagHTML5で追加 リンク先は現在の文書に適用するタグを表すURL <a>
<area>
No
過去に定義されていたリンクタイプ
リンクタイプ 説明 指定できる要素 “body-ok”
appendix注意 リンク先の文書は文書の集まりの付録 <link> <a>
<area>
No
chapter注意 リンク先の文書は文書の集まりの章 <link> <a>
<area>
No
contents注意 リンク先は目次 <link> <a>
<area>
No
copyright注意 リンク先は現在の文書の著作権情報 <link> <a>
<area>
No
glossary注意 リンク先は現在の文書が関連する用語の用語集 <link> <a>
<area>
No
index注意 リンク先は現在の文書の索引 <link> <a>
<area>
No
section注意 リンク先の文書は文書の集まりの節 <link> <a>
<area>
No
serviceworkerHTML Living Standardで定義注意 リンク先は登録するService Worker <link> No
start注意 リンク先は一連の文書の中で最初の文書 <link> <a>
<area>
No
subsection注意 リンク先の文書は文書の集まりの項 <link> <a>
<area>
No

その他のリンクタイプ

リンクタイプは仕様書に定義されている標準のリンクタイプ以外にも拡張として登録されているリンクタイプを使用することが認められています。以下はそのうちの広く使用されているものです。

リンクタイプ 説明 指定できる要素 “body-ok”
apple-touch-icon リンク先は現在の文書のウェブクリップアイコン <link> No
apple-touch-icon-precomposed リンク先は現在の文書のウェブクリップアイコン(古いバージョンのiOSではアイコンの光沢が無効) <link> No
mask-icon リンク先はSafariのページピン用のアイコン <link> No

使用例

文書の翻訳版を示す

文書の翻訳版を示す
<link rel="alternate" href="en/sample.html" hreflang="en">

リンク先が文書の翻訳版であることを示す
<a href="en/sample.html" rel="alternate" hreflang="en">リンク</a>

hreflang”属性で示された言語での翻訳版を示します。

別のデバイス向けの文書を示す

<link rel="alternate" href="m/sample.html" media="handheld">

media”属性で示されたデバイス向けの代替文書を示します。

文書のアイコンを示す

<link rel="icon" type="image/png" href="favicon.png">

文書の外部スタイルシートを示す

<link rel="stylesheet" href="style.css">

属性値に“alternate”を併用すると代替スタイルシートを指定することができます。対応するブラウザではユーザーが任意にスタイルシートを切り替えることができます。この場合title”属性でのスタイルシート名の指定が必要です。

<link rel="stylesheet" href="style-a.css" title="標準スタイル">
<link rel="stylesheet alternate" href="style-b.css" title="代替スタイル">
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク