＜head要素＞ - メタデータをまとめる

公開日: 2017/02/08

head要素は、ドキュメントのメタデータをまとめるための要素です。そのドキュメントのタイトルや文字コードなど、ページ上には表示されない情報を内包します。

概要

名前

head

カテゴリー

なし。

配置できる場所

html要素の最初の子要素。

コンテンツモデル

iframe要素のsrcdoc属性で指定されるドキュメントの場合、またはタイトルが上位プロトコルで指定される場合は0個以上のメタデータ。それ以外の場合は、1つ以上のメタデータ。この1つはタイトルであること。

タグの省略

head要素が空の場合、またはhead要素内の最初が要素の場合は開始タグを省略できる。

head要素の直後がASCIIの空白、またはコメントでない場合は終了タグを省略できる。

DOM Interface

HTMLHeadElement

デフォルトのスタイル

head {
	display: none;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-head-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

メタデータとは？

人間の目や鼻は見ることができますが、年齢や名前は見ることができません。ウェブページも同様で、文字や画像はページ上に表示されますが、タイトルや文字コードは表示されません。後者のような情報をメタデータと呼びます。メタデータを表す情報は基本的にhead要素の子要素として配置します。

HTML

<head>
	<!-- タイトル -->
	<title>ページのタイトル</title>

	<!-- 文字コード -->
	<meta charset="utf-8">

	<!-- スタイルシート -->
	<link rel="stylesheet" href="./style.css">
</head>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜head要素＞ - メタデータをまとめる</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/head/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>メタデータの1つであるtitle要素を変更して、新しいウィンドウで開いてみて下さい。</p>
<p>ページには表示されませんが、デスクトップのブラウザならページ外のタブ部分などに反映されます。</p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/568/"> <meta charset="utf-8"> <title>【デモ】＜head要素＞ - メタデータをまとめる</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/head/"> </head> <body>

<p>メタデータの1つであるtitle要素を変更して、新しいウィンドウで開いてみて下さい。</p> <p>ページには表示されませんが、デスクトップのブラウザならページ外のタブ部分などに反映されます。</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>