最終更新日 2021年6月26日

link要素

link要素は、現在のドキュメントと別のドキュメントとのリンクについて設定します。link要素はコンテンツを持たない空要素であり、終了タグはありません。

href属性は、リンク先ドキュメントのURLを指定します。link要素でリンクを定義するなら、href属性の値は必須です。

rel属性も、link要素に必須の属性です。rel属性でリンクタイプを指定することにより、ドキュメント間の関係を設定できます。

また、type属性は、リンク先ドキュメントのファイルの種類を「text/html」や「text/plain」などのMIMEタイプで指定します。CSSのスタイルシートを指定するときは「text/css」とします。

title属性では、リンクのタイトルを指定できますが、rel属性でスタイルシートを指定した場合にのみ、title属性の値を使って「代替スタイルシートセット」を定義できます。

link要素によって設定されたハイパーリンクとrel属性は、ページ全体に適用されます。一方、a要素とarea要素で設定されるハイパーリンクとrel属性の設定は、ドキュメント内のリンクの位置に対応しています。

link要素は、Metadataコンテンツの記述箇所、またはhead要素内のnoscript要素内で使用できます。

なお、title属性を指定しない場合、link要素では親要素のtitle属性を継承しません。

HTML5での変更点

・link要素のcharset属性は廃止されました。代わりに、リンク先リソース上のHTTPのContent-Typeヘッダーを使います。
・methods属性は廃止されました。代わりに、HTTP OPTIONS機能を使います。
・rev属性は廃止されました。代わりに、rel属性を逆の用語で指定します。
・target属性は廃止されました。

カテゴリ	タグの省略	親要素	子要素
Metadataコンテンツ	空要素	head、headの子となるnoscript	なし

属性	値	説明
href	URL	リンク先文書のURLを指定。
rel	リンクタイプ	文書間の関係をリンクタイプで指定する。半角スペースで区切って複数のリンクタイプを指定可能。
media	メディアタイプ	どのデバイスで表示される文書かを指定。カンマで区切って複数のメディアを指定可能。省略時は初期値の「all」が適用され、すべてのメディアを対象とした文書になります。
hreflang	言語コード	リンク先文書の言語を指定。
type	MIMEタイプ	リンク先文書のファイルの種類を指定。
sizes	アイコンサイズ	rel属性のリンクタイプで「ico」を指定した場合のみ使用。アイコンの縦×横サイズをピクセル単位で指定（sizes="16x16"）。複数指定する場合は半角スペース区切る（sizes="16x16 32x32"）。
title	文字列	リンク先文書のタイトルを指定。
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>マクドエイド</title>
    <link rel="author" href="profile.html">
    <link rel="help" href="help.html">
    <link rel="prev" href="prev.html">
    <link rel="next" href="next.html">
    <link rel="stylesheet" href="sample.css" type="text/css">
    <link rel="icon" href="favicon.png" type="image/png" sizes="16x16">
  </head>
  <body>
    <p>バーガーショップ「マクドエイド」にようこそ！</p>
  </body>
</html>

参考文献：W3C HTML5「4.2.4 The link element」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。