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

html要素

1.仕様

HTML要素は、
HTML文書の
基点(ルート)を
表します。

HTML O O (HEAD,BODY) -- the root of an HTML document. (Normal elements.) [None] --

html

基点 (the root of an HTML document)

種類

通常要素

カテゴリ

なし

使用できるコンテキスト
ルート要素

文書のドキュメント要素として使用できます。
複合文書内でサブドキュメントフラグメントが許可されている場所で使用できます。

コンテンツモデル
1つの<head>要素と、それに続く1つの<body>要素

1つの<head>要素と、それに続く1つの<body>要素が配置できます。

ただし HTML4.01 Frameset の場合は、ひとつの head要素と、それに続くひとつの frameset要素です。

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

開始タグは、html要素内の最初のものがコメントでない場合は省略可能です。

終了タグは、html要素の直後にコメントが続かない場合は省略可能です。

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

manifest属性がありましたが、廃止されました。代わりにサービスワーカーを使用してください。

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

DOM インターフェイス
HTMLHtmlElement
  1. [Exposed=Window]
  2. interface HTMLHtmlElement : HTMLElement {
  3. lastReviewed;
  4. [HTMLConstructor] constructor();
  5.  
  6. // also has obsolete members
  7. };
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
暗黙的="generic" ARIAロール="No" aria-* 属性="No"

暗黙的な ARIAセマンティクスは、role=generic です。

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

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

レンダリング
ブロックボックス
ページ
  1. html {
  2. display: block;
  3. }

CSS を大雑把に読むと、 ブロックレベルのブロックコンテナボックス(ブロックボックス)を生成します。 などになります。

説明
html要素は、HTML文書の基点(ルート)を表します。

html要素は、作成者は、ルート HTML要素に lang属性を指定して、ドキュメントの言語を指定する事が推奨されます。
これにより、音声合成ツールが使用する発音を決定したり、翻訳ツールが使用するルールを決定したりしやすくなります。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>html要素の例 - (Example of html element) | 離珠のHTMLでしぃ！</title>
  6. <meta name="author" content="コータン (KOUTAN)">
  7. <link rel="icon" href="../favicon.ico" type="image/vnd.microsoft.icon">
  8. </head>
  9. <body>
  10. <h1>html要素の例</h1>
  11. <p>この例の html要素は、ドキュメントの言語が日本語であることを宣言しています。</p>
  12. </body>
  13. </html>

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

参照元
参照元
JSONデータ
JSON形式での、データのイメージです。
  1. {
  2. "html": {
  3. "group": "Page",
  4. "element": "O O (HEAD,BODY) -- the root of an HTML document. (Normal elements.) [None] --",
  5. "attlist": {"%Global;": ""},
  6. "summary": "基点 (the root of an HTML document)",
  7. "point": "HTML文書の基点(ルート)を表します。",
  8. "description": [
  9. "作成者は、ルート HTML要素に lang属性を指定して、ドキュメントの言語を指定する事が推奨されます。",
  10. "これにより、音声合成ツールが使用する発音を決定したり、翻訳ツールが使用するルールを決定したりしやすくなります。",
  11. ],
  12. "elementKind": "Normal",
  13. "categories": "None",
  14. "canUsedContexts": "%Root",
  15. "contentModel": "HTML (HEAD,BODY)",
  16. "contentmodelsupplement": "ただし HTML4.01 Frameset の場合は、ひとつの head要素と、それに続くひとつの frameset要素です。",
  17. "tagOmission": [
  18. "O",
  19. "O",
  20. ],
  21. "tagsupplement": [
  22. "開始タグは、html要素内の最初のものがコメントでない場合は省略可能です。",
  23. "終了タグは、html要素の直後にコメントが続かない場合は省略可能です。",
  24. ],
  25. "rendering": "Page",
  26. "domInterface": "HTMLHtmlElement",
  27. "contentAttributes": "Global",
  28. "attributessupplement": [
  29. "manifest属性がありましたが、廃止されました。代わりにサービスワーカーを使用してください。",
  30. "version属性がありましたが、廃止されました。不要です。完全に省いてください。",
  31. ],
  32. "reference": [
  33. {
  34. "title": "HTML Living Standard. 4.1.1 The html element. Last Updated 5 August 2025",
  35. "href": "https://html.spec.whatwg.org/multipage/semantics.html#the-html-element",
  36. "heading": "HTML Living Standard. 4.1.1 The html element",
  37. "sub": "最終更新日 2025年8月5日",
  38. },
  39. {
  40. "title": "HTML Living Standard. 15 Rendering 15.3.2 The page. Last Updated 5 August 2025",
  41. "href": "https://html.spec.whatwg.org/multipage/rendering.html#the-page",
  42. "heading": "HTML Living Standard. 15 Rendering 15.3.2 The page",
  43. "sub": "最終更新日 2025年8月5日",
  44. },
  45. {
  46. "title": "HTML 5.3 W3C Working Draft. 4.1.1 The html element. W3C First Public Working Draft, 14 December 2017",
  47. "href": "https://www.w3.org/TR/2017/WD-html53-20171214/semantics.html#the-html-element",
  48. "heading": "HTML 5.3 W3C 初公開ワーキングドラフト. 4.1.1 The html element",
  49. "sub": "W3Cワーキングドラフト、2017年12月14日",
  50. },
  51. {
  52. "title": "HTML 5.3 W3C Working Draft. 10.3.2. The page. W3C First Public Working Draft, 14 December 2017",
  53. "href": "https://www.w3.org/TR/2017/WD-html53-20171214/rendering.html#the-page",
  54. "heading": "HTML 5.3 W3C 初公開ワーキングドラフト. 10. Rendering 10.3.2. The page",
  55. "sub": "W3Cワーキングドラフト、2017年12月14日",
  56. },
  57. {
  58. "title": "HTML 5.2 W3C Recommendation. 4.1.1 The html element. W3C Recommendation, 14 December 2017.",
  59. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/semantics.html#the-html-element",
  60. "heading": "HTML 5.2 W3C 勧告. 4.1.1 The html element",
  61. "sub": "W3C勧告、2017年12月14日",
  62. },
  63. {
  64. "title": "HTML 5.2 W3C Recommendation. 10. Rendering 10.3.2. The page. W3C Recommendation, 14 December 2017.",
  65. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/rendering.html#the-page",
  66. "heading": "HTML 5.2 W3C 勧告. 10. Rendering 10.3.2. The page",
  67. "sub": "W3C勧告、2017年12月14日",
  68. },
  69. {
  70. "title": "HTML 5.1 W3C Recommendation. 4.1.1 The html element. W3C Recommendation, 1 November 2016.",
  71. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/semantics.html#the-html-element",
  72. "heading": "HTML 5.1 W3C 勧告. 4.1.1 The html element",
  73. "sub": "W3C勧告、2016年11月1日",
  74. },
  75. {
  76. "title": "HTML 5.1 W3C Recommendation. 10. Rendering 10.3.2. The page. W3C Recommendation, 1 November 2016.",
  77. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/rendering.html#the-page",
  78. "heading": "HTML 5.1 W3C 勧告. 10. Rendering 10.3.2. The page",
  79. "sub": "W3C勧告、2016年11月1日",
  80. },
  81. {
  82. "title": "HTML 5 W3C Recommendation. 4.1.1 The html element. W3C Recommendation, 28 October 2014.",
  83. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/semantics.html#the-html-element",
  84. "heading": "HTML 5 W3C 勧告. 4.1.1 The html element",
  85. "sub": "W3C勧告、2014年10月28日",
  86. },
  87. {
  88. "title": "HTML 5 W3C Recommendation. 10. Rendering 10.3.2. The page. W3C Recommendation, 28 October 2014.",
  89. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/rendering.html#the-page",
  90. "heading": "HTML 5 W3C 勧告. 10. Rendering 10.3.2. The page",
  91. "sub": "W3C勧告、2014年10月28日",
  92. },
  93. {
  94. "title": "HTML 4.01 Specification W3C Recommendation. 7.3 The HTML element. W3C Recommendation 24 December 1999.",
  95. "href": "https://www.w3.org/TR/html401/struct/global.html#h-7.3",
  96. "heading": "HTML 4.01 Specification W3C 勧告. 7.3 The HTML element",
  97. "sub": "W3C勧告1999年12月24日",
  98. },
  99. {
  100. "title": "HTML 3.2 Reference Specification. W3C Recommendation 14-Jan-1997.",
  101. "href": "https://www.w3.org/TR/2018/SPSD-html32-20180315/",
  102. "heading": "HTML 3.2 Reference Specification",
  103. "sub": "W3C勧告1997年1月14日",
  104. },
  105. {
  106. "title": "Hypertext Markup Language - 2.0. November 1995.",
  107. "href": "https://www.ietf.org/rfc/rfc1866.txt",
  108. "heading": "Hypertext Markup Language - 2.0",
  109. "sub": "November 1995",
  110. },
  111. {
  112. "title": "Hypertext Markup Language (HTML). June 1993.",
  113. "href": "https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt",
  114. "heading": "Hypertext Markup Language (HTML)",
  115. "sub": "June 1993",
  116. },
  117. {
  118. "title": "MDN Web Docs. HTML <html>: The HTML Document / Root element.",
  119. "href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/html",
  120. "heading": "MDN Web Docs. HTML <html>: HTML 文書 / ルート要素",
  121. },
  122. ],
  123. "version": {
  124. "first": "HTML",
  125. "latest": "HTML Living Standard",
  126. },
  127. "lastReviewed": "2025-08-10",
  128. }
  129. }

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

最終確認日

2025-08-10

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

html要素は、
HTML文書の
ルートとなる
要素です。

<html>要素が使用できるコンテキスト(Context・文脈)は、文書のドキュメント要素として、または複合文書内でサブドキュメントフラグメントが許可されている場合です。

逆に、あるべき箇所に<html>要素がある(タグが省略されている)ものとして処理されるので、その点は注意が必要かと思います。

(文書のドキュメント要素は、その文書を親とする要素が存在する場合はその要素であり、そうでない場合はnullである。)

HTML文書の基点

  1. html開始タグ
  2. の前
  3. <h2>html要素の外側</h2>
  4. 外側のテキスト
  5. <html lang="ja">
  6. <head>
  7. <meta charset="utf-8">
  8. <title>離珠のHTMLでしぃ！</title>
  9. </head>
  10. <body>
  11. 内側の先頭テキスト
  12. <p>このページの言語は、
  13. "<code id="JCD201">〇〇</code>"です。</p>
  14. <p>このページの表題は、
  15. "<code id="JCD202">〇〇</code>"です。</p>
  16. <script>
  17. document.addEventListener("DOMContentLoaded", function() {
  18. document.getElementById("JCD201").textContent = document.documentElement.lang;
  19. document.getElementById("JCD202").textContent = document.title;
  20. });
  21. </script>
  22. 内側の<br>末尾テキスト
  23. </body>
  24. </html>
  25. html終了タグの後に
  26. <br><a href="./sphtml.htm" target="_parent">html要素</a>へのリンクも追加してみました。

この例では、<iframe src="./omittedhtml.htm"></iframe> とHTMLファイルを埋め込んで提示しています。このファイルの内容は、<html>要素の記述できる箇所をイメージする為の例として記述しています。 html要素開始タグは５行目に記述してありますが、ここでは１行目のテキストの前に、html要素開始タグ, head要素開始タグ, head要素終了タグ, body要素開始タグが省略されているものとして扱われています。 なので、３行目のh2要素開始タグ, h2要素終了タグは適切な記述として扱われ、レンダリングされています。改行コードも１つの空白として扱われています。 そして、５～１０行目のHTMLのタグですが、不適切な記述としてそれなりに扱われているようにみえます。完全に無効なタグなら、要素のコンテンツにあたる物は表示されるのですが、８行目の<title>要素のコンテンツは表示されていません。 しかし、１０行目のbody要素開始タグの後にあるテキストは改行されていません。

スクリプトで処理してみると、<html>要素, <title>要素などは適切に処理されている様です。別途行った簡単な動作確認では、どこに配置されているかではなくて、最初にある<html>要素のlang属性, <title>要素のコンテンツが採用されているだけの様です。<html>要素を<html>要素の子孫として配置しても、祖先の<html>要素にlang属性がない場合は採用されていました。

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

3.コンテンツモデル

html要素は、
head要素と
body要素を
配置できます。

<html>要素の子や子孫としてどのようなコンテンツ(Content・内容) が含まれなければならないかというと、1つの<head>要素と、それに続く1つの<body>要素です。尚、<head>要素と<body>要素ともにタグの省略が可能なので、ソース上の見た目には注意かと思います。

尚 HTML4.01 Frameset でなら、１つの<head>要素と、それに続く１つの<frameset>要素がこの順番で配置されます。

document
html
head
body
  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>要素とそれに続く１つの<body>要素を配置できます。というか、その配置で固定です。

ツリーで表すと、<html>要素が基点で、その下に<head>要素と<body>要素があります。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <meta charset="utf-8">
  4. <title>離珠のHTMLでしぃ！</title>
  5. <p>タグが省略された例</p>
  6. </html>

<head>要素と<body>要素ともにタグの省略が可能であり、タグの省略であって要素自体は存在しています。ここでの<p>要素は、<html>要素の孫の位置に配置されていて子の位置ではありません。スクリプトやスタイルシートの指定では注意が必要です。

4.コンテンツ属性

html要素は、
グローバル属性のみ、
配置できます。

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

作成者は、ルート HTML要素にlang属性を指定して、ドキュメントの言語を指定する事が推奨されます。 これにより、音声合成ツールが使用する発音を決定したり、翻訳ツールが使用するルールを決定したりしやすくなります。

manifest属性がありましたが、削除されました。代わりにサービスワーカーを使用してください。 詳細は、Service Workers Nightlyで確認して下さい。

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

lang属性

  1. <html lang="ja">

lang属性 は、要素の言語を設定するグローバル属性です。 編集不可の要素では記述されている言語を、また編集可能な要素ではユーザーが書き込むべき言語を定義します。
その値は、有効な言語タグ、または空の文字列である必要があります。属性を空の文字列に設定すると、1次言語が不明であることを示します。これらの属性が要素から省略されている場合、この要素の言語は、その最も近い祖先要素で言語を保持している要素の言語と同じです。

この例では、"ja"(日本語) をhtml要素開始タグに指定しています。<html>要素でlang属性を省略すると、<html>要素の祖先要素がないので1次言語が不明となります。その為、<html>要素でlang属性を記述する事をお勧めします。

5.DOM インターフェイス

documentの
プロパティである
documentElementは、
ルート要素である
html要素を返します。

<html>要素を JavaScript などで操作するには、documentのプロパティであるdocumentElementを用います。これは、ルート要素である<html>要素を返します。この時に取得できる値の形式はHTMLHtmlElement インターフェイスです。

HTMLHtmlElement インターフェイスは、HTMLElement インターフェイスを継承しつつ、独自のメンバーの追加はありません。

document の querySelector()メソッド等を用いる事も考えられますが、このプロパティで充分でしょう。

このページの言語は、 " 〇〇 "です。

  1. <p>このページの言語は、
  2. "<code id="JCD501">〇〇</code>"です。</p>
  3. <script>
  4. document.addEventListener("DOMContentLoaded", function() {
  5. document.getElementById("JCD501").textContent = document.documentElement.lang;
  6. });
  7. </script>

<html>要素のlang属性の値を取得する例です。例示で表示する為に、HTML文書の読み込みと解析が終了した時に処理するコードとしています。

6.アクセシビリティ

html要素の
暗黙的な
ARIAセマンティクスは、
generic role
(それ自体には意味を持たない、
名前のないコンテナ要素)
です。

<html>要素の暗黙的なARIAセマンティクスは、role="generic" です。
generic roleで禁止されている状態とプロパティは、aria-label, aria-labelledby, aria-roledescription です。
generic role は、「それ自体には意味を持たない、名前のないコンテナ要素」です。

generic role は、ホスト言語（HTML div や span など）における汎用要素の暗黙的なロールとして使用することを意図しており、主にユーザーエージェントの実装者向けです。作成者はコンテンツ内でこのロールを使用すべきではありません。作成者は、暗黙的なアクセシビリティセマンティクスを削除するためにpresentationまたはnoneを使用することも、子孫を名前付きコンテナに意味的にグループ化するためにgroupなどのセマンティックコンテナロールを使用することもできます。

presentationロールを持つ要素と同様に、genericロールを持つ要素は、子孫に対してaria-live属性など、限られた数のアクセシブルな状態とプロパティを提供できます。ただし、presentationロールを持つ要素とは異なり、汎用要素はアクセシビリティAPIで公開されるため、支援技術はレイアウトや境界などの特定のプロパティを収集できます。

作成者が<html>要素に明示的に指定可能なARIA ロール（役割）は、No role (役割なし) です。作成者は暗黙的なARIAセマンティクスまたは HTML 要素のネイティブ セマンティクスを上書きしてはならないことを表します。

指定できる aria-*属性はありません。

つまり、<html>要素の役割は、generic (それ自体には意味を持たない、名前のないコンテナ要素) で固定です。作成者は、ARIA ロール値と aria-* 属性を<html>要素に指定出来ないという事です。 HTML要素の暗黙のARIAセマンティクスである role=genericを明示したいといって <html lang="ja" role="generic"> などと記述してはいけないという事です。

7.レンダリング

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

<html>要素のユーザーエージェントレベルのスタイルシートデフォルトでは、displayプロパティの値は block であり、ブロックレベルのブロックコンテナボックス(ブロックボックス) を生成します。

<html>要素はルート要素であり、それを含むブロックフォーマットコンテキストがない為、新しいブロックフォーマットコンテキストを確立します。
ルート要素が存在する包含ブロックは、初期包含ブロックと呼ばれる長方形です。これは、ビューポート(連続メディアの場合) またはページ領域 (ページメディアの場合) のサイズを持ちます。
ルート要素の背景がキャンバスの背景になり、その背景のペイント領域がキャンバス全体をカバーするように拡張されます。ルート要素はこの背景を再度ペイントしません。つまり、背景の使用値は透明です。

<html>要素は、フォーマットコンテキストに参加しない<head>要素と、ブロックレベルの<body>要素だけを配置します。なのでここでは、インラインフォーマットコンテキストは確立されません。<body>要素は、包含ブロックが<html>要素のブロックボックスであり<html>要素が新しいブロックフォーマットコンテキストを確立している為、そのまま継続します。

html要素ブロックフォーマット
コンテキスト
body要素コンテンツ

ボックスで表すと、<html>要素が存在して、その中に<body>要素があります。

<html>要素は、ブロックレベルのブロックコンテナであるボックスを生成します。<html>要素はルート要素であり、それを含むブロックフォーマットコンテキストがない為、新しいブロックフォーマットコンテキストを確立します。<html>要素は、ブロックレベルのボックスを生成する<body>要素だけを配置します。なのでここでは、インラインフォーマットコンテキストは確立されません。

<head>要素は、フォーマットコンテキストに参加しない, ボックスやテキストシーケンスを生成しないので、ここでは現れません。

尚、この説明は各要素のレンダリングに関する指定が既定値での話で、個々にスタイルを指定した場合はこの限りではありません。

リセットＣＳＳ

  1. html {
  2. line-height: 1.15;
  3. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  4. }

これは、リセットＣＳＳのnormalize.cssの<html>要素の部分を抜き出したものです。

line-heightは、すべてのブラウザで行の高さを修正します。

-webkit-tap-highlight-colorは、iOS で方向を変更した後のフォントサイズの調整を防止します。

html要素の高さ

ルート要素 (html要素) が存在する包含ブロックは、初期包含ブロックと呼ばれる長方形です。これは、ビューポート (連続メディアの場合) またはページ領域 (ページメディアの場合) のサイズを持ちます。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>html要素の高さ - [離珠のHTMLでしぃ！]</title>
  6. <style>
  7. html {
  8. border: solid 1px #ff0000;
  9. box-sizing: border-box;
  10. }
  11. body {
  12. border: solid 1px #0000ff;
  13. box-sizing: border-box;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <a href="./sphtml.htm">html要素</a>のページに戻るリンクです。
  19. <h1 title="Height of html element.">html要素の高さ</h1>
  20. <p>Height of html element.</p>
  21. <form onchange="document.documentElement.style.height = document.getElementById('JSE701').value;">
  22. このhtml要素の高さは、<select id="JSE701">
  23. <option value="auto">auto</option>
  24. <option value="100%">100%</option>
  25. <option value="100vh">100vh</option>
  26. </select>です。
  27. </form>
  28. <form onchange="document.body.style.height = document.getElementById('JSE702').value;">
  29. このbody要素の高さは、<select id="JSE702">
  30. <option value="auto">auto</option>
  31. <option value="100%">100%</option>
  32. <option value="100vh">100vh</option>
  33. <option value="calc(100% - 16px)">calc(100% - 16px)</option>
  34. <option value="calc(100vh - 18px)">calc(100vh - 18px)</option>
  35. </select>です。
  36. </form>
  37. <form onchange="document.documentElement.style.fontSize = document.getElementById('JIN703').value + 'em';">
  38. この文字の大きさは、<input id="JIN703" type="number" max="5.0" min="0.5" step="0.5" value="1.0">emです。
  39. </form>
  40. </body>
  41. </html>

この例では、<iframe src="./heighthtml.htm"> とHTMLファイルを埋め込んで提示しています。

<html>要素の高さについて体感する為に、cssで<html>要素, <body>要素の枠を視覚化して、JavaScriptで cssを動的に設定して表示するというものです。ついでに余白とか線の幅など、幅や高さを扱う時の注意点も、表しています。

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

インラインレベルのコンテンツのみを含む

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>html要素でインラインフォーマットコンテキストを確立 - head要素, title要素, body要素のdisplayプロパティの値を全て inline にして、html要素をインラインレベルのコンテンツのみを含む状態にし、インラインフォーマットコンテキストを確立させる。 - [離珠のHTMLでしぃ！]</title>
  6. <style>
  7. head, title, body {
  8. display: inline;
  9. }
  10. body {
  11. border: double 3px #ff0000;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <a href="./sphtml.htm">html要素</a>のページに戻るリンクです。
  17. </body>
  18. </html>

この例では、<iframe src="./inlinetitle.htm"> とHTMLファイルを埋め込んで提示しています。

<head>要素, <title>要素, <body>要素のdisplayプロパティの値を全て inline にした場合は、インラインレベルのコンテンツのみを含むブロックコンテナボックスなので、新しいインラインフォーマットコンテキストを確立します。次に、要素は、すべてのインラインコンテンツをラップするルートインラインボックスも生成します。

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

背景

ルート要素の背景がキャンバスの背景になり、その背景のペイント領域がキャンバス全体をカバーするように拡張されます。ただし、画像は、ルート要素のみに対してペイントされているかのように、ルート要素に対してサイズと位置が設定されます。（つまり、ルート要素と同様に背景配置領域が決定されます。）ルート要素はこの背景を再度ペイントしません。つまり、背景の使用値は透明です。

ルート要素が<html>要素であるドキュメントの場合で、ルート要素の background-image の計算値が none で、その background-color が transparent である場合は、ユーザーエージェントは代わりに その要素の子要素の<body>要素の背景プロパティを用います。その<body>要素の背景プロパティの使用値はそれらの初期値であり、伝播された値はルート要素で指定されたかのように扱われます。HTMLドキュメントの作成者は、<html>要素ではなく<body>要素のキャンバスの背景を指定することをお勧めします。

この内容の参照元は、「CSS Backgrounds and Borders Module Level 3」です。

8.気を付ける点

タグの省略の扱い

<html>要素のタグは省略可能です。<html>要素に記述できる<head>要素, <body>要素もタグは省略可能です。なのでソースコードを読む時にタグが省略されている可能性も意識して読む必要があります。
また記述する側としては、html要素開始タグを省略するという事はlang属性を省略するという事でもある事を留意して記述する必要があると思います。

これに関して重要な事は、意図せずhtml要素開始タグの前にテキスト等を記述してしまうと、その前にhtml要素開始タグが省略されているものとして処理されてしまうという事です。以降に記述されているhtml要素開始タグは不適切なタグとしてそれなりに処理されます。意図しない表示になった時に原因を探し易くする為にも、出来るだけタグは省略しない方が良いと思います。

  1. <!DOCTYPE html>
  2. <title>離珠のHTMLでしぃ！</title>
  3. <h1>離珠のHTMLでしぃ！</h1>
  4. タグを省略しています。

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

基点要素の扱い

<html>要素は基点要素であるので、その性質は文書全体の内容に影響します。性質は、属性の指定や CSS の指定により指定できます。

呼称

<html>要素とは、要素名が「html」である要素の事です。「HTMLの要素」と言った場合は、HTML言語の個々の「要素」を指し、<body>要素, <head>要素, <html>要素など特定の要素を示すものではありません。

このサイトでは、英字の大文字, 小文字でそれらを区別して表現するようにしています。(仕様のポイントを記した吹き出しでは、要素名のつづりを見分ける意図で大文字を使用しています。) 尚、HTML言語では、タグ名の大文字, 小文字の区別をしません。HTML構文では、タグ名は、外部要素のタグ名であっても、すべて小文字に変換すると要素のタグ名と一致する小文字と大文字の任意の組み合わせで記述できます。<html> も <HTML> も <Html> も同じです。

CSSリセット

  1. html {
  2. line-height: 1.15;
  3. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  4. }

normalize.css というリセットCSS の一部です。すべてのブラウザで行の高さを修正します。 iOSで向きを変更した後のフォントサイズの調整を防止します。
詳細は理解していないのですが、いろいろとバグ等の対応も含んでいる様なので、リセットCSSを利用する事をお勧めします。

使用できるARIAの役割なし

この要素は、「使用できるARIAの役割、状態、およびプロパティ」で「役割なし、またはaria-*属性」とあります。この「役割なし」という用語が含まれている場合は、作成者が暗黙のARIAセマンティクスまたはHTML要素のネイティブセマンティクスを上書きしてはならないことを示しています。つまりHTML要素の暗黙のARIAセマンティクスである role=documentを明示したいといって <html lang="ja" role="document"> などと記述してはいけないという事です。