<link>要素の定義
英語で「連結」「関連」を表す、”link”より。
現在の文書と外部のリソースとの関係を指定します。この要素はスタイルシートへのリンクに最もよく使用されますが、”favicon”などの、サイトのアイコンとにリンクや、その他のことにも使用されます。
空要素なので、子要素を持つことは出来ません。
親要素として使えるもの
メタデータ要素を受け入れるすべての要素。なお、itemprop属性を指定している場合は、記述コンテンツを受け入れるすべての要素。
許可されているARIAロール
なし
DOMインターフェース
HTMLLinkElement
属性
グローバル属性が指定できます。
as
この属性は、 rel=”preload” または rel=”prefetch” を <link>要素に設定した場合に限り使用されます。これは <link>によって読み込まれるコンテンツのタイプを指定する属性であり、コンテンツの優先度づけ、リクエストのマッチング、正しいコンテンツセキュリティポリシーの適用、正しい Acceptリクエストヘッダーの設定のために必要です。
crossorigin
関連する画像の取得の際に、CORS （オリジン間リソース共有）を使用しなければならないかを示します。CORS を有効にしていると、汚染されること無く、<canvas> 要素で画像を再利用できます。
- anonymous （デフォルト）：オリジン間要求 (Origin: HTTP ヘッダーを持つ要求) を実行しますが、信用情報 (Cookie、 X.509 証明書、 HTTP ベーシック認証など) は送信しません。サーバーがそのオリジンのサイトに信用情報を付与しない (HTTP の Access-Control-Allow-Origin ヘッダーの設定がない) 場合は、画像が汚染され、その使用も制限されます。
- use-credentials ：信用情報を伴ってオリジン間要求 (HTTP の Origin ヘッダーを持つ要求) を送信します (Cookie、証明書、 HTTP ベーシック認証を使用します)。サーバーが元のサイトに信用情報を付与しない場合は (HTTP の Access-Control-Allow-Credentials ヘッダーに関わらず)、画像が汚染され、その使用も制限されます。
href
リンクしたリソースの URL を指定します。URL は絶対・相対のどちらでもかまいません。
hreflang
リンク先のリソースの言語を示します。
media
リンク先のリソースが適用されるメディアを指定します。この値はメディアクエリーでなければなりません。この属性は主に外部のスタイルシートから、実行中のデバイスに最適なものをユーザーエージェントが選択できるようにリンクするときに役立ちます。
rel
現在の文書に対する、リンクされた文書の関係を示します。属性値は、空白で区切られたリンク種別の値のリストでなければなりません。
- alternate
- rel属性の値が”stylesheet”の場合に、代替スタイルシートを定義します。
- type属性を application/rss+xml または application/atom+xml に設定した場合は、シンジケーションフィードを定義します。ページ内で最初に定義したものが既定になります。
- 上記以外の場合は、代替ページを定義します。携帯端末など、別の媒体向けのページ、別の言語向けのページ、PDFなど別形式のファイルなど。
- author ： 作者について説明するページへのハイパーリンク、または作者への連絡方法を定義します。
- canonical ： canonical を指定した link要素は、検索エンジン最適化（SEO）の一環として、「正規」または「推奨」バージョンのウェブページを特定することで、ウェブマスターが重複コンテンツの問題を防ぐのに役立ちます。
- help ： ページ全体について詳細なヘルプを提供するリソースへのリンクであることを示します。
- icon ： ユーザーインターフェイス上でページを表すリソースを定義します。通常は（聴覚的あるいは視覚的な）アイコンです。PC向けのブラウザに表示される”favicon”やスマートフォンのホーム画面に表示するためのアイコンを指定します。なお、iOSデバイス向けにアイコンを指定する場合は、”apple-touch-icon”を指定します。
- license ： ライセンス情報を説明する文書へ誘導するハイパーリンクを定義します。
- manifest ： リンクしたファイルが Web App Manifest であることを示します。
- modulepreload ： モジュールスクリプトの読み込みを早めに (かつ優先して) 始めます。
- next ： 現在のページが属する一連のページ群で、次のページへ移動するリンクであることを示します。
- pingback ： ウェブページについてコメントや引用を行いたい場合に呼び出すための、外部リソース URI を定義します。
- prefetch ： ユーザーが要求すると思われるため、リンク先のリソースを事前に読み込むようブラウザーに提案します。
- preload ： 事前にリンク先のリソースを読み込んでオフスクリーンでレンダリングしておくよう、ブラウザーに提案します。
- prev ： 現在のページが属する一連のページ群で、前のページへ移動するリンクであることを示します。
- search ： ハイパーリンクが、この文書やサイトとそのリソースを検索するために特別に設計されたインターフェイスを持つ文書を参照することを示します。
- shortlink ： インスタントメッセージングによるリンクの共有をしやすくするために、短いリンクを作成する際に使用します。
- stylesheet ： スタイルシートとして使用する外部リソースを定義します。 type が設定されなかった場合、ブラウザーはさらなる解析を行うまで、 text/css スタイルシートであるとみなします。
sizes
この属性は、リソースに含まれる映像メディア向けのアイコンのサイズを定義します。これは、 rel の値が icon 又は Apple の apple-touch-icon のような標準外の種別が含まれている場合にのみ指定することができます。以下の値を指定できます。
- any
- ホワイトスペースで区切られたサイズのリスト
［幅のピクセル値］x［高さのピクセル値］で表記します。（例：幅40px、高さ30pxの場合、”30×40”と表記）
title
rel=”stylesheet”が指定されていた場合、優先スタイルシートか代替スタイルシートか を定義します。間違って使用すると スタイルシートが無視されます。
type
リンク先コンテンツの種類を定義します。この属性の値は text/html や text/css などの MIME タイプにします。この属性の一般的な使用法は、参照されるスタイルシートのタイプ (text/css など) の定義ですが、 CSS はウェブ上の唯一のスタイルシート言語であるため、 type 属性を省略できるばかりでなく、それが実際に推奨される習慣になっています。また rel=”preload” リンク種別で、ブラウザーが対応するファイルタイプのみダウンロードさせるためにも使用します。
サンプル
link属性とrel属性
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="description" content="Webサイトの概要です。"> <meta name="keywords" content="Webサイト,ノウハウ"> <title>Webページの表題を記載します</title> <link rel='stylesheet' href='style.css' /> <script src='main.js'></script> </head> <body> 表示される部分です。内容が入ります。 </body> </html>
サンプルを表示
この例の場合、rel=’stylesheet’ という記述で、この <link>要素がスタイルシートに対してのリンクであることを示し、href=’style.css’ という記述で、そのリンク先のファイル名が、同じディレクトリにある、”style.css” というファイルであることを示しています。
MDN Web Docs： https://developer.mozilla.org/ja/
W3C仕様の正確な定義、最新情報は上記サイトをご覧ください。
コメント