HTML - link 要素

概要

名前
link
カテゴリー
  • Metadata content
  • Flow content: body 要素に配置できる場合のみ。
  • Phrasing content: body 要素に配置できる場合のみ。
配置できる場所
head 要素の中。itemprop 属性がある場合は記述コンテンツを受け入れるすべての要素。
コンテンツモデル
空要素のため、子ノードを持ちません。
説明
link 要素は、現在の HTML 文書と他のファイルを関連付ける要素です。具体的には関連付けるファイルの URL を href 属性に指定し、rel 属性に指定するキーワードでそのファイルが何であるのかを示します。HTML5 以降では、rel 属性の値が stylesheet のときに type 属性を省略すると、デフォルト値の text/css が適用されます。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLLinkElement
仕様書
仕様書策定状況コメント
LS:現行の標準
REC:勧告
  • crossorigin 属性、および sizes 属性を追加。
  • media の値をすべてのメディアクエリに拡張。
  • rel に多くの新たな値を追加。
REC:勧告
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
11
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

属性

サポートブラウザ
属性名 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
charset11
crossorigin182515
disabled
href11
hreflang11
integrity4545
media11
methods4
prefetch564356
rel11
rev11
sizes
target11
title11
type11
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support
グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。
crossorigin
この列挙型の属性は、関連リソースを取得する際に CORS を使用しなければならないかを示します。CORS が有効な画像は、汚染されることなく canvas 要素で再利用できます。次の値が使用できます。
anonymous
オリジン間リクエスト (HTTP の Origin ヘッダーを持つリクエスト) が実行されます。ただし、信用情報は送信されません (Cookie、X.509 証明書、HTTP ベーシック認証は利用されません)。サーバが元のサイトに信用情報を付与しない (HTTP の Access-Control-Allow-Origin ヘッダーの設定がない) 場合、画像が汚染され、その使用も制限されます。
use-credentials
オリジン間リクエスト (HTTP の Origin ヘッダーを持つリクエスト) が実行され、信用情報が送信されます (Cookie、証明書、HTTP ベーシック認証が利用されます)。サーバが元のサイトに信用情報を付与しない場合 (HTTP の Access-Control-Allow-Credentials ヘッダーに関わらず)、画像が汚染され、その使用も制限されます。
この属性が存在しない場合、リソースは CORS リクエストなしで (Origin HTTP ヘッダーを送信せずに) 取得され、汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワード anonymous が指定されたものとして扱われます。
href
この属性は、リンクしたリソースの URL を指定します。URL は絶対・相対のどちらでもかまいません。
hreflang
この属性は、リンク先のリソースの言語を示します。この属性は、href 属性が提供されている場合にのみ使用します。
media
この属性は、リンク先のリソースが適用されるメディアを指定します。この値はメディアクエリでなければなりません。この属性は主に外部のスタイルシートから、実行中のデバイスに最適なものをユーザエージェントが選択できるようにリンクするときに役立ちます。
referrerpolicy
リソースを読み込む際にどのリファラーを使用するかを示す文字列です。
  • no-referrer は、Referer ヘッダーを送信しないことを表します。
  • no-referrer-when-downgrade は、TLS (HTTPS) を使用せずに生成元へナビゲートする場合は Referer ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザエージェントの既定の動作です。
  • origin は、ページの生成元 (大まかにいえばスキーム、ホスト、ポート) をリファラーとすることを表します。
  • origin-when-cross-origin は、異なるオリジンへの移動ではリファラーをスキーム、ホスト、ポートに制限します。同一オリジンへの移動では、リファラーのパスも含めます。
  • unsafe-url は、リファラーに生成元とパスを含めることを表します (ただし、フラグメント、パスワード、ユーザ名は含めません)。これは生成元やパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。
rel
この属性は現在の文書に対する、リンクされた文書の関係を示します。属性値は、空白で区切られたリンク種別の値のリストでなければなりません。
alternate
代替スタイルシートを定義します。この場合は title 属性が必須であり、空文字列にすることはできません。
archives
この文書へのアーカイブリンクを含む文書へのハイパーリンクを定義します。例えば、ブログ記事はこの方法を使用して、月別の目次へリンクできます。archives 属性は廃止された API であり、今後の動作は保障されていません。
author
作者について説明するページへのハイパーリンク、または作者への連絡方法を定義します。author 属性に mailto: を設定した場合、大量のスパムが送信される可能性があるため推奨されません。その場合、連絡フォームを設置したページに誘導する方法が推奨されます。
canonical
canonical を指定した link 要素は、検索エンジン最適化(SEO)の一環として、「正規」または「推奨」バージョンのウェブページを特定することで、ウェブマスターが重複コンテンツの問題を防ぐのに役立ちます。
first
現在のページが属する一連のリソース群で、最初のリソースへ移動するリンクであることを示します。一連のリソースへのリンクに関するリンク種別として、この他に lastprevnext があります。ただし、この一連の属性は廃止された API であり、今後の動作は保障されていません。
help
ページ全体について詳細なヘルプを提供するリソースへのリンクであることを示します。
icon
ユーザインターフェイス上でページを表すリソースを定義します。通常は(聴覚的あるいは視覚的な)アイコンです。複数の <link rel="icon"> がある場合、ブラウザは media, type, sizes 属性を使用して、もっとも適切なアイコンを選択します。もし複数のアイコンが同等に適切であれば、最後の一つが使用されます。ただし、そのアイコンが未対応の形式である場合、ブラウザは次に適切なアイコンを選択します。
index
当該ページは階層構造を持つ文書群の一部であり、階層のトップレベルのリソースへのハイパーリンクであることを示します。index 属性は廃止された API であり、今後の動作は保障されていません。
last
現在のページが属する一連のリソース群で、最後のリソースへ移動するリンクであることを示します。一連のリソースへのリンクに関するリンク種別として、この他に firstprevnext があります。ただし、この一連の属性は廃止された API であり、今後の動作は保障されていません。
license
ライセンス情報を説明する文書へ誘導するハイパーリンクを定義します。head 要素内に配置しない場合に、文書内の一部に適用するか文書全体にするかの区別は標準化されていません。ページ上のデータだけが、ライセンスを示すことができます。
next
現在のページが属する一連のリソース群で、最後のリソースへ移動するリンクであることを示します。一連のリソースへのリンクに関するリンク種別として、この他に firstprevlast があります。ただし、この一連の属性は廃止された API であり、今後の動作は保障されていません。
pingback
ウェブページについてコメントや引用を行いたい場合に呼び出すための、外部リソース URI を定義します。このような呼び出しで使用するプロトコルは、Pingback 1.0 仕様で定義しています。
prev
現在のページが属する一連のリソース群で、前のリソースへ移動するリンクであることを示します。一連のリソースへのリンクに関するリンク種別として、この他に firstnextlast があります。ただし、この一連の属性は廃止された API であり、今後の動作は保障されていません。
search
ハイパーリンクが、この文書やサイトとそのリソースを検索するために特別に設計されたインターフェイスを持つ文書を参照することを示します。
shortlink
一部のウェブサイトでは、インスタントメッセージングによるリンクの共有をしやすくするために、短いリンクを作成します。
stylesheet
スタイルシートとして使用する外部リソースを定義します。type が設定されなかった場合、ブラウザはさらなる解析を行うまで、text/css スタイルシートであるとみなします。キーワード alternate と組み合わせて使用すると、代替スタイルシートを定義できます。この場合は title 属性が必須であり、空文字列にすることはできません。
up
当該ページは階層構造を持つ文書群の一部であり、階層の上位レベルのリソースへのハイパーリンクであることを示します。up リンク種別の数で、当該ページとリンク先文書の階層の差を示します。up 属性は廃止された API であり、今後の動作は保障されていません。
title
title 属性は、link 要素では特別な意味があります。<link rel="stylesheet"> で使用すると、優先スタイルシートか代替スタイルシートか を定義します。
type
type 属性は、リンク先コンテンツの種類を定義します。type 属性の値は text/htmltext/css などの MIME タイプにします。よく使われる MIME タイプは以下のとおりです。MIME タイプの一覧は、MIME タイプの一覧を参照してください。
拡張子文書の種類MIME タイプ
.htm/.htmlHTML ファイルtext/html
.cssCSS ファイルtext/css
.jsJavaScript ファイルtext/javascript
.txtテキストファイルtext/plain
.xmlXML ファイルtext/xml
.jsonJSON ファイルapplication/json
.gifGIF ファイルimage/gif
.pngPNG ファイルimage/png
.jpg/.jpegJPEG ファイルimage/jpeg
.webpWEBP ファイルimage/webp

非推奨の属性

以下の属性は非推奨、非標準、実験的、または廃止された属性のため、使用しないでください。

charset
廃止された属性。今後の動作は保障されていません。
disabled
非推奨。新しいウェブサイトでは使用しないでください。
非標準。ブラウザ間の互換性が低い可能性があります。
integrity
実験的。動作が変更される可能性があります。
methods
非推奨。新しいウェブサイトでは使用しないでください。
非標準。ブラウザ間の互換性が低い可能性があります。
prefetch
実験的。動作が変更される可能性があります。
dns-prefetch
実験的。動作が変更される可能性があります。
manifest
実験的。動作が変更される可能性があります。
非標準。ブラウザ間の互換性が低い可能性があります。
modulepreload
実験的。動作が変更される可能性があります。
preconnect
実験的。動作が変更される可能性があります。
prefetch
実験的。動作が変更される可能性があります。
preload
実験的。動作が変更される可能性があります。
prerender
実験的。動作が変更される可能性があります。
rev
廃止された属性。今後の動作は保障されていません。
sizes
実験的。動作が変更される可能性があります。
target
非推奨。新しいウェブサイトでは使用しないでください。

サンプルコード

link 要素のサンプルコードは以下のとおりです。

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        ...
    </body>
</html>
link 要素のサンプルコード

関連記事