rel属性

link要素のrel属性は、ドキュメントと外部リソースとの関連性を示すリンクタイプを指定する必須属性。

ブラウザ対応

構文

<link href="URL" rel="リンクタイプ">

リンクタイプ

alternate
現在のドキュメントの代替ドキュメントへのリンクであることを示す。
author
現在のドキュメントや記事の著者へのリンクであることを示す。
help
ヘルプ・ドキュメントへのリンクであることを示す。
icon
現在のドキュメント用のアイコンへのリンクであることを示す。
license
著作権情報へのリンクであることを示す。
next
一連のドキュメントにおける次のドキュメントへのリンクであることを示す。
prefetch
リンク先ドキュメントを先制キャッシュ。
prev
一連のドキュメントにおける前のドキュメントへのリンクであることを示す。
search
現在のドキュメントとその関連ページを検索するために使用可能なリソースへのリンクであることを示す。
stylesheet
現在のドキュメントに読み込む外部スタイルシートへのリンクであることを示す。

要点

  • link要素のrel属性は、ドキュメントと外部リソースとの関連性を指定する属性である。
  • link要素における必須属性。link要素に必ず指定しなければならない。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<link href="stylesheet.css" rel="stylesheet" type="text/css">
		<title>ドキュメントのタイトル</title>
	</head>
	<body>
		ドキュメントの内容
	</body>
</html>

サンプル

HTMLソースコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<link href="sample-link.css" rel="stylesheet" type="text/css">
		<title>link要素のサンプル・ドキュメント</title>
	</head>
	<body>
		<h1>見出し[h1]</h1>
		<article>
			<h2>見出し[H2]</h2>
			<p>記事セクション。</p>
		</article> 
	</body>
</html>

CSSファイル

link要素で読み込む「sample-link.css」の内容。

h1 {
    color: #f00;
}
h2 {
    color: #009900;
}
p {
    color: #4800ff;
}

実際の表示

別窓で表示。