メインコンテンツへスキップ

head要素

仕様

HEAD要素は、
文書のメタデータの
集まりを表します。

head
文書に関する付加的な情報 (document Head)
種類
通常要素
カテゴリ
なし
レンダリング
ボックスを生成しない
非表示の要素
  1. head {
  2. display: none;
  3. }

CSS を大雑把に読むと、 要素とその子孫は、ボックスやテキストランを生成しません。 などになります。

使用できる状態
html要素の1番目の要素として使用できます。
許可されている内容
文書が iframe要素の文書である場合、または題名情報がより上位のプロトコルから利用可能である場合、 メタデータコンテンツ*。(title? & base?) & (meta要素 | link要素 | style要素 | script要素 | noscript要素 | template要素)*
それ以外の場合、メタデータコンテンツ+。(title & base?) & (meta要素 | link要素 | style要素 | script要素 | noscript要素 | template要素)*
タグの省略
開始タグは、要素が空の場合は省略してもよいし、head要素の内部の最初のものが要素なら省略可能です。
終了タグは、head要素に続く最初のものが空白文字やコメントでない場合は省略可能です。
許可されているARIA
なし[No corresponding role]
属性

グローバル属性のみ

DOM
HTMLHeadElement
  1. [Exposed=Window]
  2. interface HTMLHeadElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4. };
PUG
_template.pug
  1. block variable
  2. block document
  3. doctype html
  4. html(lang="ja")
  5. head
  6. block head
  7. meta(charset="UTF-8")
  8. title 離珠のHTMLでしぃ！
  9. body
  10. block body
  11. | html要素のサンプル用ページです。
説明
head要素は、文書のメタデータの集まりを表します。

head要素は、メタデータを含む (囲む, まとめる) 要素です。

メタデータとは、文書に関する機械可読な情報の事です。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>離珠のHTMLでしぃ！</title>
  6. </head>
  7. <body>
  8. body要素のサンプル用ページです。
  9. </body>
  10. </html>
参照元
参照元
  1. HTML Living Standard. 4.2.1 The head element
  2. HTML Living Standard. 15 Rendering 15.3.1 Hidden elements
  3. HTML 5.2 W3C 勧告. 4.2.1. The head element (W3C勧告、2017年12月14日)
  4. HTML 5.2 W3C 勧告. 10.3.1. Hidden elements (W3C勧告、2017年12月14日)
  5. HTML 5.1 W3C 勧告. 4.2.1. The head element (W3C勧告、2016年11月1日)
  6. HTML 5.1 W3C 勧告. 10.3.1. Hidden elements (W3C勧告、2016年11月1日)
  7. HTML 4.01 Specification W3C 勧告. 7.4.1 The HEAD element (W3C勧告1999年12月24日)
  8. HTML 3.2 Reference Specification. The HEAD element (W3C勧告1997年1月14日)
  9. Hypertext Markup Language - 2.0 (November 1995)
  10. Hypertext Markup Language (HTML) (June 1993)
  11. MDN Web Docs. HTML <head>: 文書メタデータ (ヘッダー) 要素
最終確認日
2022-07-27

使用可能な箇所

html要素に
配置できます。

head要素は、html要素の最初の要素として配置できます。
と言うより html要素の最初以外には配置できないという事です。head要素は空でもタグが省略できるので、html要素の最初にあるものとして処理されます。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>離珠のHTMLでしぃ！</title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>

html要素の最初の要素として、head要素を配置できます。

  1. <!DOCTYPE html>
  2. <head lang="ja">
  3. <meta charset="UTF-8">
  4. <title>離珠のHTMLでしぃ！</title>
  5. </head>
  6. <body lang="ja">
  7. </body>

html要素は、開始タグ, 終了タグともに省略が可能です。ただしタグの記述が省略されているだけで、要素がない訳ではありません。なので記述としては、html要素のタグが記述できる箇所にhead要素のタグを記述する事が出来ます。スクリプトやスタイル言語などで階層を意識する事でも注意が必要です。

例では、html要素のタグを省略して、代わりに子要素にlang属性を記述しています。意味としては少々異なりますが、同等の効果は得られると思います。ただ記述の可否の例示なので、出来ればhtml要素のタグは省略しないで、そこにlang属性を記述する事が望ましいと思います。他者のソースを読む時の参考程度に。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <meta charset="UTF-8">
  4. <title>離珠のHTMLでしぃ！</title>
  5. <body>
  6. </body>
  7. </html>

head要素は、開始タグ, 終了タグともに省略が可能です。ただしタグの記述が省略されているだけで、要素がない訳ではありません。なので記述としては、html要素の最初に head開始タグがあるものとしてメタデータコンテンツである要素が記述でき、その後に head終了タグがあるものとして処理されます。

配置できるコンテンツ

メタデータコンテンツを
配置できます。

head要素は、文書が iframe要素の文書である場合、または題名情報がより上位のプロトコルから利用可能である場合は、 0個以上のメタデータコンテンツを配置できます。 それ以外の場合は、1つ以上のメタデータコンテンツを配置できます。そのうちの1つは title要素であり、base要素は1つだけです。

  1. <head>
  2. <meta charset="UTF-8">
  3. <title>離珠のHTMLでしぃ！</title>
  4. <base href="http://risyu.in.coocan.jp/" target="_self">
  5. <link rel="stylesheet" href="./risyu.css" type="text/css">
  6. <style>
  7. body{ color: #ff0000; }
  8. </style>
  9. <script src="./risyu.js"></script>
  10. <noscript>
  11. <link rel="stylesheet" href="./noscript.css" type="text/css">
  12. </noscript>
  13. <template id="iteTemplate">
  14. <!--ここにテンプレートを書く-->
  15. </template>
  16. </head>

charset属性を指定している meta要素は、head要素の最初の要素として配置する事が望ましいです。

iframe要素によって表示されるHTML文書などより高いレベルのプロトコルから題名情報が利用可能である場合を除き、１つの title要素が必要です。

base要素は１つ以下です。それ以外のメタデータコンテンツを０個以上が指定可能です。

メタデータコンテンツの一覧

meta要素
一般的なメタ情報
title要素
文書の題名
base要素
文書の基底 URI
link要素
外部リソースにリンク
style要素
スタイル情報
script要素
スクリプト
noscript要素
スクリプトが無効な場合
template要素
コンテンツの雛型

属性

グローバル属性のみ、
設定できます。

head要素は、グローバル属性のみ 設定できます。
head要素は、メタデータを含む (囲む, まとめる) 要素なので、属性を設定する必要はないと思います。メタデータの多くが文書と異なる性質を持つ場合のみ、属性を指定する意味があるでしょう。それ以外ではHTML文書の基点(ルート)に属性を設定するのが望ましいです。

Web API

documentの
プロパティである
headは、
head要素を返します。

  1. document.head.className = "ecoTest0000";
  2. window.alert("document.head.className="+document.head.className);
  3. window.alert("document.documentElement.children[0].className);

headは、documentのプロパティであり、要素であるhead要素を返します。headプロパティは、読取専用です。変更しようとすると、エラーとなります。headプロパティはオブジェクトです。オブジェクトのプロパティは、オブジェクトが読取専用であってもその制限は受けません。個々のプロパティが読取専用であるか否かです。なので、headプロパティのclassプロパティに値を代入したり、head要素の子要素を追加, 削除する事も可能です。尚、head要素はhtml要素の最初の子要素なので、documentElementプロパティの子要素のリストの１番目がhead要素でもあります。

レンダリング

  1. html {
  2. display: none;
  3. }

head要素は、ビジュアルメディアではボックスを生成せず、レイアウトに影響を与えません。子孫要素もボックスを生成しません。メタデータを記述する為の要素なので、ビジュアルメディアでボックスを生成する様な指定は行わないのが良いでしょう。

気を付ける点

タグの省略の扱い

head要素のタグは省略できます。要素が空でそれに続く最初のものが空白文字やコメントでない場合は、開始タグ, 終了タグの共に省略ができます。
しかし head要素自体はそこに存在します。html要素の最初の要素として配置できる head要素は空で記述しなくても存在するという事です。
つまり body要素を html要素の内部の最初の記述としても、それは html要素の２番目の子要素として配置されているという事です。
そしてそれは、記述している時は分かっていても読む時に「head要素はどこ？」と分かり難いという事です。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <body>
  4. <h1>離珠のHTMLでしぃ！</h1>
  5. </body>
  6. </html>

文書が iframe要素の文書であるなど title要素が任意の場合に、head要素が空の場合があります。その時 開始タグ, 終了タグ共に省略した場合に html要素の最初の内容(コンテンツ)としての記述が body要素になる事があります。