head要素

head要素は、ドキュメントのメタデータのコレクション（集合）であることを示す要素。

カテゴリー どのカテゴリーにも属さない。
コンテキスト html要素内の最初の要素として使用できる。
コンテンツ・モデル 複数のメタデータ・コンテンツ要素を内包できる。
title要素を１つ内包しなければならない。
ただし、iframe要素のsrcdoc属性に指定したドキュメントの場合や、より高いレベルのプロトコルにタイトルがある場合は、title要素を内包しなくてよい。より高いレベルのプロトコルにタイトルがある場合とは、タイトル付きのメールドキュメントなどだ。
属性 グローバル属性。
ブラウザ対応

要点

  • head要素は、ドキュメントのメタデータ・コンテンツ要素のコレクションであることを示す要素である。
  • html要素内の最初の要素として配置する。
  • head要素内には、title要素を配置しなければならない。ただし、iframe要素のsrcdoc属性に指定したドキュメントの場合や、より高いレベルのプロトコルにタイトルがある場合は、title要素を内包しなくてよい。

head要素内に配置できる要素

サンプルコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<meta name="keywords" content="キーワード１,キーワード２,キーワード３">
		<meta name="description" content="ドキュメントの説明。">
		<link href="stylesheet.css" type="text/css" rel="stylesheet">
		<title>タイトル</title>
	</head>
	<body>
		ドキュメントの内容
	</body>
</html>

サンプル

HTMLソースコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<meta name="keywords" content="サンプル,head,要素,タグ,HTML5">
		<meta name="description" content="head要素のサンプル。">
		<link href="sample-head.css" type="text/css" rel="stylesheet">
		<title>サンプル</title>
	</head>
	<body>
		<h1>見出し[h1]</h1>
		<article>
			<h2>見出し[H2]</h2>
			<p>記事セクション。</p>
		</article> 
	</body>
</html>

CSSファイル

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

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

実際の表示