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

link要素:外部リソースと関連付ける

記事May 2nd,2015
Oct. 7th,2020
文書を他の外部リソースと関連付ける要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

link”要素はリンクを生成して文書を他の外部リソースや他の文書と関連付ける要素です。

外部スタイルシートの読み込みにもっともよく使用されますが、rel”属性の値によってウェブページのアイコンの指定や先行して読み込むべき外部リソースの指定などさまざまな役割があります。

関連付けられる外部リソースはhref”属性もしくはimagesrcset”属性によって指定されます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="alternate" hreflang="en" href="en/banana.html">
<link rel="icon" href="image/favicon.ico">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="stylesheet" href="css/stylesheet-sp.css" media="( max-width: 640px )">
<link rel="stylesheet" href="css/stylesheet-tab.css" media="( min-width: 640px ) and ( max-width: 1280px )">
<link rel="stylesheet" href="css/stylesheet-pc.css" media="( min-width: 1280px )">
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...

属性と値

現行の仕様で定義されている属性

属性
属性 説明 説明
必須属性(いずれか一つ)
rel="" 文書と外部リソースの関係 alternate リンク先は現在の文書の代替文書
authorHTML5で追加 リンク先は著者情報
canonicalHTML5.2で追加 リンク先が類似する文書の中で最も推奨される文書
dns-prefetchHTML Living Standardで定義 リンク先のDNSによる名前解決を事前に行う
help リンク先は詳細なヘルプを提供する文書
iconHTML5で追加 リンク先は現在の文書を表すアイコン
licenseHTML5で追加 リンク先はライセンス情報を説明する文書
manifestHTML Living Standardで定義 リンク先はウェブアプリマニフェスト
modulepreloadHTML Living Standardで定義 リンク先のモジュールスクリプトを先行して読み込む
next リンク先は一連の文書の中で現在の文書の次の文書
pingbackHTML Living Standardで定義 リンク先は現在の文書のピンバックを扱うピンバックサーバー
preconnectHTML Living Standardで定義 リンク先への接続を事前に確立する
prefetchHTML5で追加 リンク先を事前に取得する
preloadHTML Living Standardで定義 リンク先を先行して読み込む
prerenderHTML Living Standardで定義 リンク先を事前に取得してレンダリングする
prev リンク先は一連の文書の中で現在の文書の前の文書
searchHTML5で追加 リンク先現在の文書と関連する文書内を検索するための機能
stylesheet リンク先は現在の文書に適用する外部スタイルシート
リンクタイプ その他のリンクタイプ
itemprop=""HTML Living Standardで定義 マイクロデータのプロパティ名を指定する プロパティ名 itemtype”属性で指定された定義に基づくプロパティ名
必須属性(少なくとも一つ)
href="" 文書と関連付ける外部リソース URL 文書と関連付ける外部リソースのURL
imagesrcset=""HTML Living Standardで定義 使用可能な画像ファイルのセット URL 画像の横幅w,URL 画像の横幅w,... ビューポートの幅ごとの表示する画像のURL
URL デバイスピクセル比x,URL デバイスピクセル比x,... デバイスピクセル比ごとの表示する画像のURL
任意属性
グローバル属性
crossorigin=""HTML5で追加 外部リソースを読み込む時のCORSリクエストを設定 anonymous CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない
use-credentials CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する
media="" 外部リソースが対象とするメディア メディアクエリ 外部リソースが対象とするメディア条件
integrity=""HTML Living Standardで定義 外部リソースの整合性を確認 ハッシュ値 BASE64でエンコードした外部リソースのハッシュ値
hreflang="" 外部リソースが記述されている言語 言語コード 外部リソースが記述されている言語
type="" 外部リソースのデータの種類 MIMEタイプ 外部リソースのMIMEタイプ
referrerpolicy=""HTML5.2で追加 リファラーポリシーを指定 リファラーポリシー リファラーポリシーを指定
sizes=""HTML5で追加 アイコンのサイズ any サイズの調整が可能
横幅x高さ アイコンのサイズのピクセル数
imagesizes=""HTML Living Standardで定義 画像を表示するサイズ 長さ imagesrcset”属性を幅記述子(“w”)で指定した時】画像の表示サイズの横幅
メディアクエリ 長さ,メディアクエリ 長さ,...,長さ imagesrcset”属性を幅記述子(“w”)で指定した時】メディア条件ごとの画像の表示サイズの横幅
as=""HTML Living Standardで定義 先行して読み込む外部リソースの利用先 audio audio”要素で埋め込まれる音声ファイル
video video”要素で埋め込まれる動画ファイル
track track”要素で埋め込まれる動画ファイル
script script”要素などで埋め込まれる外部スクリプト
style link”要素で読み込まれるスタイルシート
font @font-face”ルールで読み込まれるフォントファイル
image picture”要素img”要素で埋め込まれる画像ファイル
embed embed”要素で埋め込めれるリソース
object object”要素で埋め込めれるリソース
document frame”要素iframe”要素で埋め込まれるHTML文書
リクエストデスティネーション “Fetch”仕様書に定義されたキーワード
fetch フェッチまたはXHR要求でアクセスされるリソース
color=""HTML Living Standardで定義 Safariのページピンアイコンの色を指定 CSSの<color>”値
disabled=""HTML Living Standardで定義 外部スタイルシートへのリンクの無効化 disabled 外部スタイルシートへのリンクの無効化
title="" rel”属性の値にstylesheetを含む時】代替スタイルシートの名前 テキスト 代替スタイルシートの名前
rel”属性の値にstylesheetを含まない時】外部リソースに補足情報を付ける テキスト 補足情報

rel”属性マイクロデータ属性itemprop”属性のうちいずれか一つが必須です。ただし、これらの属性を同時に指定することはできません。

href”属性imagesrcset”属性のいずれか、もしくは両方を指定しなければなりません。

rel”属性の値にpreloadが指定されている場合はas”属性は必須属性です。

グローバル属性title”属性rel”属性の値にstylesheetが指定された“link”要素に指定した場合は他の要素に指定した場合と意味合いが異なります。

過去に定義された属性

属性
属性 説明 説明
charset=""注意 外部リソースの文字エンコーディング 文字エンコーディング 外部リソースの文字エンコーディング
rev=""注意 リンク先から見た現在の文書との関係 リンクタイプ リンク先から見た現在の文書との関係
nonce=""HTML5.2で追加 コンテンツセキュリティポリシーのためのワンタイムトークン ワンタイムトークン 自動生成したBASE64でエンコードされた暗号

利用場所

通常“link”要素を配置できる場所は以下の2箇所です。

ただし、rel”属性の値が“body-ok”な値のみである場合、もしくはマイクロデータ属性itemprop”属性が指定されている場合はフレージング・コンテンツが置ける場所にも配置することができます。

リンクの種類

link”要素はrel”属性の値によって2種類のリンクを生成します。

外部リソースへのリンク
現在の文書に付加される外部リソースへのリンクです。リンク先の外部リソースはブラウザにより自動的に処理されます。
ハイパーリンク
ブラウザによりユーザーに示されるリンクです。ユーザーはリンク先にアクセスしたり、ダウンロードしたりすることができます。

rel”属性の値が複数ある場合は“link”要素は複数のリンクを生成します。場合によっては外部リソースへのリンクとハイパーリンクの両方を生成することもあります。

仕様書

link”要素はHTML1.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<link>
定義あり

定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク