link要素は次のような属性を持ちます。
| 属性 | リンク先の情報 | 備考 |
|---|---|---|
| href | リソースのURL | |
| hreflang | リソースの言語 | |
| media | リソースに適用されるメディア | |
| rel | リソースとの関連 | |
| type | リソースの種類 | |
| crossorigin | HTML5から | |
| sizes | HTML5から | |
| disabled | 非標準 | |
| methods | 非標準 | |
| target | 非標準 | |
| charset | 廃止 | |
| rev | 廃止 |
スタイルシートを指定します。
<link rel="stylesheet" type="text/css" href="style.css" />
そのページの正しいURLを指定するための、URL正規化を行います。
リソースを事前に読み込むことで、体感速度を向上できます。プリレンダリングとプリフェッチのサポート (Windows) | TechNet | MSDN
<link rel="prerender" href="http://example.com/nextpage.html" />
<link rel="prefetch" href="http://example.com/style.css" />
Faviconを指定します。
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
ファイルの名前やパスは任意に指定できますが、一般的にルートディレクトリに「favicon.ico」の名前で配置します。これは一部のブラウザなどが、既定でそのパスを調べるためです。
Faviconに指定するアイコンはツールで作成できます。またサイトで使用されているFaviconは、上記要素のhref属性のパスを調べるか、Favicon APIで取得できます。
W3Cでは、
<link rel="shortcut icon" href="/2008/site/images/favicon.ico" type="image/x-icon" />
のように記述していますが、/favicon.icoにも同様のファイルを配置しています。
icoファイルには複数のサイズの画像を格納できますが、どのサイズを用いるべきかは実際の用例を見るのが確実です。
iPhoneやiPad向けのアイコンを指定します。
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Windows 8やIE11でサイトをピン留めされたときの画像は、meta要素のmsapplication-configで指定します。
たとえばWikipediaでは、次のように記述されています。
<link rel="apple-touch-icon" href="//bits.wikimedia.org/apple-touch/wikipedia.png" />
一方でAppleのサイトにはこのような記述はなく、ただドメインのトップにhttps://www.apple.com/apple-touch-icon.pngのように画像が置かれているだけです。
リンクしている対象の型を表すMIMEタイプ。text/htmlやtext/cssなど。
