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

head要素

1.仕様

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

head

文書に関する付加的な情報 (a collection of metadata for the Document.)

種類

通常要素

カテゴリ

なし

使用できるコンテキスト
html要素の最初

html要素の最初のコンテンツとして、使用できます。

コンテンツモデル
1つ以上のメタデータコンテンツ

1つ以上のメタデータコンテンツが配置できます。

メタデータコンテンツに分類される要素は、meta要素, title要素, base要素, link要素, style要素, script要素, noscript要素, template要素 です。

head (title&base?&meta*&link*&style*&script*&noscript*&template*)

ドキュメントが iframe srcdoc ドキュメントである場合、またはタイトル情報が上位レベルのプロトコルから利用できる場合は、メタデータコンテンツの 0 個以上の要素を設定できます。そのうちの 1 つだけがtitle要素で、1 つだけがbase要素です。

それ以外の場合は、メタデータコンテンツの 1 つ以上の要素。そのうちの 1 つだけがtitle要素であり、base要素は 1 つだけです。

タグの省略
どちらのタグも省略できます。

開始タグは、要素が空の場合は省略してもよいし、head要素の内部の最初のものが要素なら省略可能です。

終了タグは、head要素に続く最初のものが空白文字やコメントでない場合は省略可能です。

コンテンツ属性
グローバル属性のみ

profile属性がありましたが、廃止されました。不要です。完全に省いてください。

DOM インターフェイス
HTMLHeadElement
  1. [Exposed=Window]
  2. interface HTMLHeadElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4. };
HTMLElement
  1. [Exposed=Window]
  2. interface HTMLElement : Element {
  3. [HTMLConstructor] constructor();
  4.  
  5. // metadata attributes
  6. [CEReactions] attribute DOMString title;
  7. [CEReactions] attribute DOMString lang;
  8. [CEReactions] attribute boolean translate;
  9. [CEReactions] attribute DOMString dir;
  10.  
  11. // user interaction
  12. [CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
  13. [CEReactions] attribute DOMString inert;
  14. undefined click();
  15. [CEReactions] attribute DOMString accessKey;
  16. readonly attribute DOMString accessKeyLabel;
  17. [CEReactions] attribute boolean draggable;
  18. [CEReactions] attribute boolean spellcheck;
  19. [CEReactions] attribute DOMString writingSuggestions;
  20. [CEReactions] attribute DOMString autocapitalize;
  21.  
  22. [CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
  23. [CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;
  24.  
  25. ElementInternals attachInternals();
  26.  
  27. // The popover API
  28. undefined showPopover();
  29. undefined hidePopover();
  30. boolean togglePopover(optional boolean force);
  31. [CEReactions] attribute DOMString? popover;
  32. };
  33.  
  34. HTMLElement includes GlobalEventHandlers;
  35. HTMLElement includes ElementContentEditable;
  36. HTMLElement includes HTMLOrSVGElement;
Element
  1. [Exposed=Window]
  2. interface Element : Node {
  3. readonly attribute DOMString? namespaceURI;
  4. readonly attribute DOMString? prefix;
  5. readonly attribute DOMString localName;
  6. readonly attribute DOMString tagName;
  7.  
  8. [CEReactions] attribute DOMString id;
  9. [CEReactions] attribute DOMString className;
  10. [SameObject, PutForwards=value] readonly attribute DOMTokenList classList;
  11. [CEReactions, Unscopable] attribute DOMString slot;
  12.  
  13. boolean hasAttributes();
  14. [SameObject] readonly attribute NamedNodeMap attributes;
  15. sequence<DOMString> getAttributeNames();
  16. DOMString? getAttribute(DOMString qualifiedName);
  17. DOMString? getAttributeNS(DOMString? namespace, DOMString localName);
  18. [CEReactions] undefined setAttribute(DOMString qualifiedName, DOMString value);
  19. [CEReactions] undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value);
  20. [CEReactions] undefined removeAttribute(DOMString qualifiedName);
  21. [CEReactions] undefined removeAttributeNS(DOMString? namespace, DOMString localName);
  22. [CEReactions] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
  23. boolean hasAttribute(DOMString qualifiedName);
  24. boolean hasAttributeNS(DOMString? namespace, DOMString localName);
  25.  
  26. Attr? getAttributeNode(DOMString qualifiedName);
  27. Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName);
  28. [CEReactions] Attr? setAttributeNode(Attr attr);
  29. [CEReactions] Attr? setAttributeNodeNS(Attr attr);
  30. [CEReactions] Attr removeAttributeNode(Attr attr);
  31.  
  32. ShadowRoot attachShadow(ShadowRootInit init);
  33. readonly attribute ShadowRoot? shadowRoot;
  34.  
  35. Element? closest(DOMString selectors);
  36. boolean matches(DOMString selectors);
  37. boolean webkitMatchesSelector(DOMString selectors); // legacy alias of .matches
  38.  
  39. HTMLCollection getElementsByTagName(DOMString qualifiedName);
  40. HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
  41. HTMLCollection getElementsByClassName(DOMString classNames);
  42.  
  43. [CEReactions] Element? insertAdjacentElement(DOMString where, Element element); // legacy
  44. undefined insertAdjacentText(DOMString where, DOMString data); // legacy
  45. };
GlobalEventHandlers
  1. interface mixin GlobalEventHandlers {
  2. attribute EventHandler onabort;
  3. attribute EventHandler onauxclick;
  4. attribute EventHandler onbeforeinput;
  5. attribute EventHandler onbeforematch;
  6. attribute EventHandler onbeforetoggle;
  7. attribute EventHandler onblur;
  8. attribute EventHandler oncancel;
  9. attribute EventHandler oncanplay;
  10. attribute EventHandler oncanplaythrough;
  11. attribute EventHandler onchange;
  12. attribute EventHandler onclick;
  13. attribute EventHandler onclose;
  14. attribute EventHandler oncontextlost;
  15. attribute EventHandler oncontextmenu;
  16. attribute EventHandler oncontextrestored;
  17. attribute EventHandler oncopy;
  18. attribute EventHandler oncuechange;
  19. attribute EventHandler oncut;
  20. attribute EventHandler ondblclick;
  21. attribute EventHandler ondrag;
  22. attribute EventHandler ondragend;
  23. attribute EventHandler ondragenter;
  24. attribute EventHandler ondragleave;
  25. attribute EventHandler ondragover;
  26. attribute EventHandler ondragstart;
  27. attribute EventHandler ondrop;
  28. attribute EventHandler ondurationchange;
  29. attribute EventHandler onemptied;
  30. attribute EventHandler onended;
  31. attribute OnErrorEventHandler onerror;
  32. attribute EventHandler onfocus;
  33. attribute EventHandler onformdata;
  34. attribute EventHandler oninput;
  35. attribute EventHandler oninvalid;
  36. attribute EventHandler onkeydown;
  37. attribute EventHandler onkeypress;
  38. attribute EventHandler onkeyup;
  39. attribute EventHandler onload;
  40. attribute EventHandler onloadeddata;
  41. attribute EventHandler onloadedmetadata;
  42. attribute EventHandler onloadstart;
  43. attribute EventHandler onmousedown;
  44. [LegacyLenientThis] attribute EventHandler onmouseenter;
  45. [LegacyLenientThis] attribute EventHandler onmouseleave;
  46. attribute EventHandler onmousemove;
  47. attribute EventHandler onmouseout;
  48. attribute EventHandler onmouseover;
  49. attribute EventHandler onmouseup;
  50. attribute EventHandler onpaste;
  51. attribute EventHandler onpause;
  52. attribute EventHandler onplay;
  53. attribute EventHandler onplaying;
  54. attribute EventHandler onprogress;
  55. attribute EventHandler onratechange;
  56. attribute EventHandler onreset;
  57. attribute EventHandler onresize;
  58. attribute EventHandler onscroll;
  59. attribute EventHandler onscrollend;
  60. attribute EventHandler onsecuritypolicyviolation;
  61. attribute EventHandler onseeked;
  62. attribute EventHandler onseeking;
  63. attribute EventHandler onselect;
  64. attribute EventHandler onslotchange;
  65. attribute EventHandler onstalled;
  66. attribute EventHandler onsubmit;
  67. attribute EventHandler onsuspend;
  68. attribute EventHandler ontimeupdate;
  69. attribute EventHandler ontoggle;
  70. attribute EventHandler onvolumechange;
  71. attribute EventHandler onwaiting;
  72. attribute EventHandler onwebkitanimationend;
  73. attribute EventHandler onwebkitanimationiteration;
  74. attribute EventHandler onwebkitanimationstart;
  75. attribute EventHandler onwebkittransitionend;
  76. attribute EventHandler onwheel;
  77. };
ElementContentEditable
  1. interface mixin ElementContentEditable {
  2. [CEReactions] attribute DOMString contentEditable;
  3. [CEReactions] attribute DOMString enterKeyHint;
  4. readonly attribute boolean isContentEditable;
  5. [CEReactions] attribute DOMString inputMode;
  6. };
HTMLOrSVGElement
  1. interface mixin HTMLOrSVGElement {
  2. [SameObject] readonly attribute DOMStringMap dataset;
  3. attribute DOMString nonce; // intentionally no [CEReactions]
  4.  
  5. [CEReactions] attribute boolean autofocus;
  6. [CEReactions] attribute long tabIndex;
  7. undefined focus(optional FocusOptions options = {});
  8. undefined blur();
  9. };
ARIA in HTML
暗黙的="No" ARIAロール="No" aria-* 属性="No"

暗黙的な ARIAセマンティクスがありませんが、意味はあり、この意味は、ARIA によって提供されず、ARIA のユーザーに公開されていないロール、状態、プロパティで表現される可能性があります。

作成者は、暗黙的な ARIAセマンティクス, または HTML要素のネイティブセマンティクスを上書きしてはいけません。

記述できる aria-* 属性はありません。

レンダリング
ボックスを生成しない
非表示の要素
  1. head {
  2. display: none;
  3. }

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

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

head要素は、文書に関する機械可読な情報を、含む (囲む, まとめる) 要素です。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>head要素の例 - (Example of head element) | 離珠のHTMLでしぃ！</title>
  6. </head>
  7. <body>
  8. <h1>head要素の例</h1>
  9. <p>この例の head要素は、文書の付加的な情報の集まりを表しています。</p>
  10. </body>
  11. </html>

このサンプルへのリンクです。
(./exhead.htm)

参照元
参照元
JSONデータ
JSON形式での、データのイメージです。
  1. {
  2. "head": {
  3. "check": "2024-09-01",
  4. "group": "Page",
  5. "element": "O O (TITLE & BASE?) +(META|LINK|STYLE|SCRIPT|NOSCRIPT|TEMPLATE) -- a collection of metadata for the Document. (Normal elements.) [None] --",
  6. "attlist": {"%Global;": ""},
  7. "comment": "文書に関する付加的な情報 (a collection of metadata for the Document.)",
  8. "point": "文書のメタデータの集まりを表します。",
  9. "description": "文書に関する機械可読な情報を、含む (囲む, まとめる) 要素です。",
  10. "kind": "Normal",
  11. "categories": "None",
  12. "used": "HTML (HEAD,BODY)",
  13. "contentmodel": "HEAD (%Metadata)+",
  14. "contentmodelsupplement": [
  15. "head (title&base?&meta*&link*&style*&script*&noscript*&template*)",
  16. "ドキュメントが iframe srcdoc ドキュメントである場合、またはタイトル情報が上位レベルのプロトコルから利用できる場合は、メタデータコンテンツの 0 個以上の要素を設定できます。そのうちの 1 つだけがtitle要素で、1 つだけがbase要素です。",
  17. "それ以外の場合は、メタデータコンテンツの 1 つ以上の要素。そのうちの 1 つだけがtitle要素であり、base要素は 1 つだけです。",
  18. ],
  19. "tag": [
  20. "O",
  21. "O",
  22. ],
  23. "tagsupplement": [
  24. "開始タグは、要素が空の場合は省略してもよいし、head要素の内部の最初のものが要素なら省略可能です。",
  25. "終了タグは、head要素に続く最初のものが空白文字やコメントでない場合は省略可能です。",
  26. ],
  27. "attributes": "Global",
  28. "attributessupplement": [
  29. "profile属性がありましたが、廃止されました。不要です。完全に省いてください。",
  30. ],
  31. "dominterface": "HTMLHeadElement",
  32. "rendering": "Hidden",
  33. "reference": [
  34. {
  35. "title": "HTML Living Standard. 4.2.1 The head element.",
  36. "href": "https://html.spec.whatwg.org/multipage/semantics.html#the-head-element",
  37. "heading": "HTML Living Standard. 4.2.1 The head element",
  38. "sub": "Last Updated 27 August 2024",
  39. },
  40. {
  41. "title": "HTML Living Standard. 15 Rendering 15.3.1 Hidden elements.",
  42. "href": "https://html.spec.whatwg.org/multipage/rendering.htmll#hidden-elements",
  43. "heading": "HTML Living Standard. 15 Rendering 15.3.1 Hidden elements",
  44. "sub": "Last Updated 27 August 2024",
  45. },
  46. {
  47. "title": "HTML 5.2 W3C Recommendation. 4.2.1. The head element.",
  48. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/document-metadata.html#the-head-element",
  49. "heading": "HTML 5.2 W3C 勧告. 4.2.1. The head element",
  50. "sub": "W3C勧告、2017年12月14日",
  51. },
  52. {
  53. "title": "HTML 5.2 W3C Recommendation. 10.3.1. Hidden elements.",
  54. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/rendering.html#hidden-elements",
  55. "heading": "HTML 5.2 W3C 勧告. 10.3.1. Hidden elements",
  56. "sub": "W3C勧告、2017年12月14日",
  57. },
  58. {
  59. "title": "HTML 5.1 W3C Recommendation. 4.2.1. The head element. W3C Recommendation, 1 November 2016.",
  60. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/document-metadata.html#the-head-element",
  61. "heading": "HTML 5.1 W3C 勧告. 4.2.1. The head element",
  62. "sub": "W3C勧告、2016年11月1日",
  63. },
  64. {
  65. "title": "HTML 5.1 W3C Recommendation. 10.3.1. Hidden elements. W3C Recommendation, 1 November 2016.",
  66. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/rendering.html#hidden-elements",
  67. "heading": "HTML 5.1 W3C 勧告. 10.3.1. Hidden elements",
  68. "sub": "W3C勧告、2016年11月1日",
  69. },
  70. {
  71. "title": "HTML 5 W3C Recommendation. 4.2.1 The head element. W3C Recommendation, 28 October 2014.",
  72. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/document-metadata.html#the-head-element",
  73. "heading": "HTML 5 W3C 勧告. 4.2.1 The head element",
  74. "sub": "W3C勧告、2014年10月28日",
  75. },
  76. {
  77. "title": "HTML 5 W3C Recommendation. 10.3.1. Hidden elements. W3C Recommendation, 28 October 2014.",
  78. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/rendering.html#hidden-elements",
  79. "heading": "HTML 5 W3C 勧告. 10.3.1. Hidden elements",
  80. "sub": "W3C勧告、2014年10月28日",
  81. },
  82. {
  83. "title": "HTML 4.01 Specification W3C Recommendation. 7.4.1 The HEAD element.",
  84. "href": "https://www.w3.org/TR/html401/struct/global.html#h-7.4.1",
  85. "heading": "HTML 4.01 Specification W3C 勧告. 7.4.1 The HEAD element",
  86. "sub": "W3C勧告1999年12月24日",
  87. },
  88. {
  89. "title": "HTML 3.2 Reference Specification. The HEAD element. W3C Recommendation 14-Jan-1997.",
  90. "href": "https://www.w3.org/TR/2018/SPSD-html32-20180315/#head",
  91. "heading": "HTML 3.2 Reference Specification. The HEAD element",
  92. "sub": "W3C勧告1997年1月14日",
  93. },
  94. {
  95. "title": "Hypertext Markup Language - 2.0. November 1995.",
  96. "href": "https://www.ietf.org/rfc/rfc1866.txt",
  97. "heading": "Hypertext Markup Language - 2.0",
  98. "sub": "November 1995",
  99. },
  100. {
  101. "title": "Hypertext Markup Language (HTML). June 1993.",
  102. "href": "https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt",
  103. "heading": "Hypertext Markup Language (HTML)",
  104. "sub": "June 1993",
  105. },
  106. {
  107. "title": "MDN Web Docs. HTML <head>: The Document Metadata (Header) element.",
  108. "href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/head",
  109. "heading": "MDN Web Docs. HTML <head>: 文書メタデータ (ヘッダー) 要素",
  110. },
  111. ],
  112. "version": {
  113. "first": "HTML",
  114. "latest": "HTML Living Standard",
  115. },
  116. }
  117. }

注意: 簡易に描画する為に、各項目の後ろに , を付与しています。JSON の形式では、末尾の項目の後には , は付けません。

最終確認日

2024-09-01

2.使用できるコンテキスト

head要素 は、
html要素の
1番目の要素として
使用できます。

head要素が使用できるコンテキスト(Context・文脈)は、html要素の最初の要素としてです。

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

html要素の最初以外に配置したhead要素は、それなりに処理されるみたいです。

document
html
head
body
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>サンプル</title>
  6. </head>
  7. <body>
  8. HTMLを用いると、テキストデータの表示等ができます。
  9. </body>
  10. </html

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

3.コンテンツモデル

head要素 は、
メタデータコンテンツを
配置できます。

head要素の子や子孫としてどのようなコンテンツ(Content・内容) が含まれなければならないかというと、1つのtitle要素と 0 または1つのbase要素と その他のメタデータコンテンツを 0 以上です。

別の言い方で細かく言うと、title要素は１つだけ配置が必要です。base要素は１つだけ配置が可能です。他のメタデータコンテンツである要素は、任意の数の配置が可能です。

ただし、文書がフレームで読み込まれる文書である場合、またはタイトル情報が上位レベルのプロトコルから利用できる場合は、title要素は、0 または１つとなります。(配置が任意となります。)

HTML3.2 までは、isindex要素という要素がありhead要素に配置できました。isindex要素は、HTML4.1 で非推奨となり HTML5 で廃止となりました。

HTML2 までは、nextid要素という要素がありhead要素に配置できました。nextid要素は、HTML2 で非推奨となり HTML3.2 で廃止となりました。

メタデータコンテンツに分類される要素は、以下の各要素です。

head
Metadata
content
  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="style.css" type="text/css">
  6. <style>
  7. body{ color: #ff0000; }
  8. </style>
  9. <script src="./script.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要素は１つだけ指定可能です。それ以外のメタデータコンテンツを０個以上が指定可能です。順番は任意ですが、記述ミス, 文字化け等を意識して、重要な物から記述するのが良いと思います。

4.コンテンツ属性

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

head要素に指定することができる属性は、グローバル属性のみ、設定できます。

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

profile属性がありましたが、削除されました。不要です。完全に省いてください。 もしくは、カスタムデータ属性として data-profile とでも置き換えるのが良いでしょう。

5.DOM インターフェイス

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プロパティのclassNameプロパティに値を代入したり、head要素の子要素を追加, 削除する事も可能です。尚、head要素はhtml要素の最初の子要素なので、documentElementプロパティの子要素のリストの１番目がhead要素でもあります。

6.レンダリング

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

head要素のユーザーエージェントレベルのスタイルシートデフォルトでは、displayプロパティの値は none であり、この要素とその子孫はボックスやテキストシーケンスを生成しません。

head要素はメタデータを記述する為の要素なので、ビジュアルメディアでボックスを生成する様な指定は行わないのが良いでしょう。

  1. head > * { display: none; }
  2. head, title { display: block; }
  3. title { margin-top: 11em; }
  4. base::after { content: "target=" attr(target); }

メタデータを記述するエスケープ可能な生テキスト要素を表示する例のつもりです。表示する予定であれば、メタデータとしてではなく表示用でもあるデータとして別の要素で記述しておくのが良いかと思います。例として記述してみても、なんか変かなと思います。まぁ技術的な可能性としての知識として見てください。 実際、ファイルの文字数を考えてみても、スタイルシートの指定が必要になり、内容次第ではかえって増えます。

使用している外部ファイルへのリンクは、「./displaymetadata.htm」です。

7.気を付ける点

タグの省略の扱い

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要素になる事があります。

タグの記述を省略しているだけで、要素は存在しています。

8.付記