4.文書同士の関係を表す

<link ref=”①” href=”②” ③>

①キーワード(stylesheet、next、prev、など)
②URL
③必要な属性(type属性など)

link要素でHTML文書を別のファイルと関連付け、それがどのような関係であるのかを表します。
関連付けるファイルのURLをhref属性で指定し、その関係性を表すキーワードをrel属性で指定します。

■rel属性
関連付けるファイルがこのHTML文書から見てどのような関係であるのかを、既定のキーワードで指定します。

例)現在の文書がpage2.htmlの場合は次のようになります。
<link rel=”index” href=”../index.html”> ← indexページとの関係
<link rel=”next” href=”page3.html”> ← 次の文書はpage3.html
<link rel=”prev” href=”page1.html”> ← 前の文書はpage1.html

スタイルシート用の外部ファイルを読み込むときにも、link要素を利用します。

例)style.cssファイルを読み込む場合は次のようになります。
<link rel=”stylesheet” href=”style.css” type=”text/css”>
<link rel=”stylesheet” href=”style.css”>

■type属性
関連付けるファイルのMIMEタイプを指定する場合は、type属性で指定します。

■media属性
href属性に指定されたファイルを、どのメディアに適用するのかを指定します。

<link rel=”stylesheet” media=”screen” href=”screen.css” title=”PC用”>
<link rel=”stylesheet” media=”print” href=”print.css” title=”PRINT用”>






■サンプル

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8”>
<title>文書同士の関係を表す</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
<link rel=”prev” href=”page1.html”>
<link rel=”next” href=”page3.html”>
<link rel=”help” href=”help.html”>
<link rel=”author” href=”profile.html”>
</head>
<body>
<p>SAMPLE</p>
</body>
</html>

■要素解説

カテゴリー:メタデータ・コンテンツ
利用できる場所:メタデータ・コンテンツが期待される場所/head要素の子要素であるnoscript要素内
コンテンツモデル:空

■ブラウザ対応状況

IE10=○、IE9=○、Firefox=○、Chrome=○、Safari=○、Opera=○、iOS6=○、iOS5=○、Android=○

■廃止属性

charset属性、rev属性、target属性