<link rel="" href="">

更新日
仕様 HTML Living Standard
分類 メタデータ・コンテンツ
利用場所 メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素
内容 無し(空要素)

link要素を使用すると、関連する別文書との関係を示すことができます。

一部のブラウザは、この情報を利用してナビゲーション用のメニュー(ナビゲーションバー)を表示します。


<link rel="prev" href="page1.html">
<link rel="next" href="page3.html">

属性
必須属性(この設定を行う場合)
rel="" 現在の文書から見たリンク先の関係 リンクタイプ 半角スペース区切りで複数指定可能
href="" リンク先の指定 URL 関連文書類のURL
任意属性
hreflang="" リンク先の記述言語 言語コード jaenzh、等
media="" 対象とするメディア メディアクエリ カンマ( , )区切りで複数指定可能(既定値は all
グローバル属性(この要素上では、title属性が特別な意味を持ちます)
title="" リンク先のタイトル テキスト 任意のタイトル

主な指定例

リンクタイプの一覧はこちらでご覧いただけます。

リンク先が、現在の文書の翻訳版en = 英語版)であることを示す。
<link rel="alternate" href="english.html" hreflang="en" title="English">
リンク先が、現在の文書の別メディア版print = 印刷用)であることを示す。
<link rel="alternate" href="print.pdf" media="print" title="プリント">
リンク先が、現在の文書に関連する著者情報であることを示す。
<link rel="author" href="profile.html" title="プロフィール">
リンク先が、現在の文書に関連する著者の連絡先であることを示す。
<link rel="author" href="mailto:info@example.com" title="メール">
リンク先が、現在の文書に関連するヘルプであることを示す。
<link rel="help" href="help.html" title="ヘルプ">
リンク先が、現在の文書に関連する著作権情報であることを示す。
<link rel="license" href="license.html" title="著作権">
一連の文書の中で、リンク先が前の文書であることを示す。
<link rel="prev" href="2020.html" title="2020年度の売上">
一連の文書の中で、リンク先が次の文書であることを示す。
<link rel="next" href="2022.html" title="2022年度の売上">
リンク先が、関連文書を検索するためのページであることを示す。
<link rel="search" href="search.html" title="検索">

alternate は、リンク先が代替文書であることを表します。同時にhreflang属性が指定されている場合は、その代替文書が現在の文書の翻訳版であることを表します。

また、同時にmedia属性が指定されている場合は、その代替文書が別のメディア向けの文書であることを表します。

title属性の指定について

title属性を指定すると、リンク先のタイトルを示すことができます。このタイトルはナビゲーションバーのメニューに表示される(?)という話もありましたが、対応しているブラウザはまだ確認できていません。(2021年12月現在)

ナビゲーションバーについて

ナビゲーションバーに対応したブラウザは非常に少ないようです。

使用例


<!DOCTYPE html>
<html>
<head>

<link rel="alternate" href="english.html" hreflang="en">
<link rel="search" href="search.html">
<link rel="help" href="help.html">
<link rel="prev" href="page1.html">
<link rel="next" href="page3.html">
<link rel="license" href="license.html">
<link rel="author" href="profile.html">

<title>文書のタイトル</title>

</head>
<body>

<p>ナビゲーションバーの表示例</p>

</body>
</html>

表示例

ナビゲーションバーは、アドレスバーの下に表示されます。

  • Opera(11)での表示例です。(一部のリンクタイプには対応していないようです)