1.仕様
HTML要素
は、
HTML文書の
基点(ルート)を
表します。
- html
-
基点 (the root of an HTML document)
- 種類
-
通常要素
- カテゴリ
-
なし
- 使用できるコンテキスト
-
ルート要素
文書のドキュメント要素として使用できます。
複合文書内でサブドキュメントフラグメントが許可されている場所で使用できます。 - タグの省略
-
どちらのタグも省略できます。
開始タグは、html要素内の最初のものがコメントでない場合は省略可能です。
終了タグは、html要素の直後にコメントが続かない場合は省略可能です。
- コンテンツ属性
-
グローバル属性のみ
manifest属性がありましたが、廃止されました。代わりにサービスワーカーを使用してください。
version属性がありましたが、廃止されました。不要です。完全に省いてください。
- DOM インターフェイス
-
HTMLHtmlElement
[Exposed=Window]
interface HTMLHtmlElement : HTMLElement {
[HTMLConstructor] constructor();
// also has obsolete members
};
HTMLElement
[Exposed=Window]
interface HTMLElement : Element {
[HTMLConstructor] constructor();
// metadata attributes
[CEReactions] attribute DOMString title;
[CEReactions] attribute DOMString lang;
[CEReactions] attribute boolean translate;
[CEReactions] attribute DOMString dir;
// user interaction
[CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
[CEReactions] attribute DOMString inert;
undefined click();
[CEReactions] attribute DOMString accessKey;
readonly attribute DOMString accessKeyLabel;
[CEReactions] attribute boolean draggable;
[CEReactions] attribute boolean spellcheck;
[CEReactions] attribute DOMString writingSuggestions;
[CEReactions] attribute DOMString autocapitalize;
[CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
[CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;
ElementInternals attachInternals();
// The popover API
undefined showPopover();
undefined hidePopover();
boolean togglePopover(optional boolean force);
[CEReactions] attribute DOMString? popover;
};
HTMLElement includes GlobalEventHandlers;
HTMLElement includes ElementContentEditable;
HTMLElement includes HTMLOrSVGElement;
Element
[Exposed=Window]
interface Element : Node {
readonly attribute DOMString? namespaceURI;
readonly attribute DOMString? prefix;
readonly attribute DOMString localName;
readonly attribute DOMString tagName;
[CEReactions] attribute DOMString id;
[CEReactions] attribute DOMString className;
[SameObject, PutForwards=value] readonly attribute DOMTokenList classList;
[CEReactions, Unscopable] attribute DOMString slot;
boolean hasAttributes();
[SameObject] readonly attribute NamedNodeMap attributes;
sequence<DOMString> getAttributeNames();
DOMString? getAttribute(DOMString qualifiedName);
DOMString? getAttributeNS(DOMString? namespace, DOMString localName);
[CEReactions] undefined setAttribute(DOMString qualifiedName, DOMString value);
[CEReactions] undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value);
[CEReactions] undefined removeAttribute(DOMString qualifiedName);
[CEReactions] undefined removeAttributeNS(DOMString? namespace, DOMString localName);
[CEReactions] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
boolean hasAttribute(DOMString qualifiedName);
boolean hasAttributeNS(DOMString? namespace, DOMString localName);
Attr? getAttributeNode(DOMString qualifiedName);
Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName);
[CEReactions] Attr? setAttributeNode(Attr attr);
[CEReactions] Attr? setAttributeNodeNS(Attr attr);
[CEReactions] Attr removeAttributeNode(Attr attr);
ShadowRoot attachShadow(ShadowRootInit init);
readonly attribute ShadowRoot? shadowRoot;
Element? closest(DOMString selectors);
boolean matches(DOMString selectors);
boolean webkitMatchesSelector(DOMString selectors); // legacy alias of .matches
HTMLCollection getElementsByTagName(DOMString qualifiedName);
HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
HTMLCollection getElementsByClassName(DOMString classNames);
[CEReactions] Element? insertAdjacentElement(DOMString where, Element element); // legacy
undefined insertAdjacentText(DOMString where, DOMString data); // legacy
};
GlobalEventHandlers
interface mixin GlobalEventHandlers {
attribute EventHandler onabort;
attribute EventHandler onauxclick;
attribute EventHandler onbeforeinput;
attribute EventHandler onbeforematch;
attribute EventHandler onbeforetoggle;
attribute EventHandler onblur;
attribute EventHandler oncancel;
attribute EventHandler oncanplay;
attribute EventHandler oncanplaythrough;
attribute EventHandler onchange;
attribute EventHandler onclick;
attribute EventHandler onclose;
attribute EventHandler oncontextlost;
attribute EventHandler oncontextmenu;
attribute EventHandler oncontextrestored;
attribute EventHandler oncopy;
attribute EventHandler oncuechange;
attribute EventHandler oncut;
attribute EventHandler ondblclick;
attribute EventHandler ondrag;
attribute EventHandler ondragend;
attribute EventHandler ondragenter;
attribute EventHandler ondragleave;
attribute EventHandler ondragover;
attribute EventHandler ondragstart;
attribute EventHandler ondrop;
attribute EventHandler ondurationchange;
attribute EventHandler onemptied;
attribute EventHandler onended;
attribute OnErrorEventHandler onerror;
attribute EventHandler onfocus;
attribute EventHandler onformdata;
attribute EventHandler oninput;
attribute EventHandler oninvalid;
attribute EventHandler onkeydown;
attribute EventHandler onkeypress;
attribute EventHandler onkeyup;
attribute EventHandler onload;
attribute EventHandler onloadeddata;
attribute EventHandler onloadedmetadata;
attribute EventHandler onloadstart;
attribute EventHandler onmousedown;
[LegacyLenientThis] attribute EventHandler onmouseenter;
[LegacyLenientThis] attribute EventHandler onmouseleave;
attribute EventHandler onmousemove;
attribute EventHandler onmouseout;
attribute EventHandler onmouseover;
attribute EventHandler onmouseup;
attribute EventHandler onpaste;
attribute EventHandler onpause;
attribute EventHandler onplay;
attribute EventHandler onplaying;
attribute EventHandler onprogress;
attribute EventHandler onratechange;
attribute EventHandler onreset;
attribute EventHandler onresize;
attribute EventHandler onscroll;
attribute EventHandler onscrollend;
attribute EventHandler onsecuritypolicyviolation;
attribute EventHandler onseeked;
attribute EventHandler onseeking;
attribute EventHandler onselect;
attribute EventHandler onslotchange;
attribute EventHandler onstalled;
attribute EventHandler onsubmit;
attribute EventHandler onsuspend;
attribute EventHandler ontimeupdate;
attribute EventHandler ontoggle;
attribute EventHandler onvolumechange;
attribute EventHandler onwaiting;
attribute EventHandler onwebkitanimationend;
attribute EventHandler onwebkitanimationiteration;
attribute EventHandler onwebkitanimationstart;
attribute EventHandler onwebkittransitionend;
attribute EventHandler onwheel;
};
ElementContentEditable
interface mixin ElementContentEditable {
[CEReactions] attribute DOMString contentEditable;
[CEReactions] attribute DOMString enterKeyHint;
readonly attribute boolean isContentEditable;
[CEReactions] attribute DOMString inputMode;
};
HTMLOrSVGElement
interface mixin HTMLOrSVGElement {
[SameObject] readonly attribute DOMStringMap dataset;
attribute DOMString nonce; // intentionally no [CEReactions]
[CEReactions] attribute boolean autofocus;
[CEReactions] attribute long tabIndex;
undefined focus(optional FocusOptions options = {});
undefined blur();
};
- ARIA in HTML
-
暗黙的="
document
" ARIAロール="No
" aria-* 属性="No
"暗黙的な ARIAセマンティクスは、
role=document
です。作成者は、暗黙的な ARIAセマンティクス, または HTML要素のネイティブセマンティクスを上書きしてはいけません。
記述できる aria-* 属性はありません。
- レンダリング
- ブロック
ボックス ページ
html {
display: block;
}
CSS を大雑把に読むと、 ブロックレベルのブロックコンテナボックス(ブロックボックス)を生成します。 などになります。
- 説明
-
html
要素 は、HTML文書の基点(ルート)を表します。html
要素 は、作成者は、ルート HTML要素に lang属性を指定して、ドキュメントの言語を指定する事が推奨されます。
これにより、音声合成ツールが使用する発音を決定したり、翻訳ツールが使用するルールを決定したりしやすくなります。作成者は、ルートhtml要素にlang
属性 を指定して、文書(ドキュメント)の言語を指定することをお勧めします。
これは、使用する発音を決定する音声合成ツール、使用する規則を決定する翻訳ツールなどを支援します。<!DOCTYPE html>
<html lang=
"ja"> <head>
<meta charset=
"utf-8"> <title>html要素の例 - (Example of html element) | 離珠のHTMLでしぃ!</title>
</head>
<body>
<h1>html要素の例</h1>
<p>この例の html要素は、ドキュメントの言語が日本語であることを宣言しています。</p>
</body>
</html>
このサンプルへのリンクです。
(./exhtml.htm) - 参照元
-
参照元
- HTML Living Standard. 4.1.1 The html element (Last Updated 27 August 2024)
- HTML Living Standard. 15 Rendering 15.3.2 The page (Last Updated 27 August 2024)
- HTML 5.2 W3C 勧告. 4.1.1 The html element (W3C勧告、2017年12月14日)
- HTML 5.2 W3C 勧告. 10.3.2. The page (W3C勧告、2017年12月14日)
- HTML 5.1 W3C 勧告. 4.1.1 The html element (W3C勧告、2016年11月1日)
- HTML 5.1 W3C 勧告. 10.3.2. The page (W3C勧告、2016年11月1日)
- HTML 5 W3C 勧告. 4.1.1 The html element (W3C勧告、2014年10月28日)
- HTML 5 W3C 勧告. 10.3.2. The page (W3C勧告、2014年10月28日)
- HTML 4.01 Specification W3C 勧告. 7.3 The HTML element (W3C勧告1999年12月24日)
- HTML 3.2 Reference Specification (W3C勧告1997年1月14日)
- Hypertext Markup Language - 2.0 (November 1995)
- Hypertext Markup Language (HTML) (June 1993)
- MDN Web Docs. HTML <html>: HTML 文書 / ルート要素
- JSONデータ
-
JSON形式での、データのイメージです。
{
"html": {
"check": "2024-09-01",
"group": "Page",
"element": "O O (HEAD,BODY) -- the root of an HTML document. (Normal elements.) [None] --",
"attlist": {"%Global;": ""},
"comment": "基点 (the root of an HTML document)",
"point": "HTML文書の基点(ルート)を表します。",
"description": [
"作成者は、ルート HTML要素に lang属性を指定して、ドキュメントの言語を指定する事が推奨されます。",
"これにより、音声合成ツールが使用する発音を決定したり、翻訳ツールが使用するルールを決定したりしやすくなります。",
],
"kind": "Normal",
"categories": "None",
"used": "%Root",
"contentmodel": "HTML (HEAD,BODY)",
"contentmodelsupplement": "ただし HTML4.01 Frameset の場合は、ひとつの head要素と、それに続くひとつの frameset要素です。",
"tag": [
"O",
"O",
],
"tagsupplement": [
"開始タグは、html要素内の最初のものがコメントでない場合は省略可能です。",
"終了タグは、html要素の直後にコメントが続かない場合は省略可能です。",
],
"attributes": "Global",
"attributessupplement": [
"manifest属性がありましたが、廃止されました。代わりにサービスワーカーを使用してください。",
"version属性がありましたが、廃止されました。不要です。完全に省いてください。",
],
"dominterface": "HTMLHtmlElement",
"rendering": "Page",
"reference": [
{
"title": "HTML Living Standard. 4.1.1 The html element",
"href": "https://html.spec.whatwg.org/multipage/semantics.html#the-html-element",
"heading": "HTML Living Standard. 4.1.1 The html element",
"sub": "Last Updated 27 August 2024",
},
{
"title": "HTML Living Standard. 15 Rendering 15.3.2 The page",
"href": "https://html.spec.whatwg.org/multipage/rendering.html#the-page",
"heading": "HTML Living Standard. 15 Rendering 15.3.2 The page",
"sub": "Last Updated 27 August 2024",
},
{
"title": "HTML 5.2 W3C Recommendation. 4.1.1 The html element. W3C Recommendation, 14 December 2017.",
"href": "https://www.w3.org/TR/2017/REC-html52-20171214/semantics.html#the-html-element",
"heading": "HTML 5.2 W3C 勧告. 4.1.1 The html element",
"sub": "W3C勧告、2017年12月14日",
},
{
"title": "HTML 5.2 W3C Recommendation. 10.3.2. The page. W3C Recommendation, 14 December 2017.",
"href": "https://www.w3.org/TR/2017/REC-html52-20171214/rendering.html#the-page",
"heading": "HTML 5.2 W3C 勧告. 10.3.2. The page",
"sub": "W3C勧告、2017年12月14日",
},
{
"title": "HTML 5.1 W3C Recommendation. 4.1.1 The html element. W3C Recommendation, 1 November 2016.",
"href": "https://www.w3.org/TR/2016/REC-html51-20161101/semantics.html#the-html-element",
"heading": "HTML 5.1 W3C 勧告. 4.1.1 The html element",
"sub": "W3C勧告、2016年11月1日",
},
{
"title": "HTML 5.1 W3C Recommendation. 10.3.2. The page. W3C Recommendation, 1 November 2016.",
"href": "https://www.w3.org/TR/2016/REC-html51-20161101/rendering.html#the-page",
"heading": "HTML 5.1 W3C 勧告. 10.3.2. The page",
"sub": "W3C勧告、2016年11月1日",
},
{
"title": "HTML 5 W3C Recommendation. 4.1.1 The html element. W3C Recommendation, 28 October 2014.",
"href": "https://www.w3.org/TR/2014/REC-html5-20141028/semantics.html#the-html-element",
"heading": "HTML 5 W3C 勧告. 4.1.1 The html element",
"sub": "W3C勧告、2014年10月28日",
},
{
"title": "HTML 5 W3C Recommendation. 10.3.2. The page. W3C Recommendation, 28 October 2014.",
"href": "https://www.w3.org/TR/2014/REC-html5-20141028/rendering.html#the-page",
"heading": "HTML 5 W3C 勧告. 10.3.2. The page",
"sub": "W3C勧告、2014年10月28日",
},
{
"title": "HTML 4.01 Specification W3C Recommendation. 7.3 The HTML element. W3C Recommendation 24 December 1999.",
"href": "https://www.w3.org/TR/html401/struct/global.html#h-7.3",
"heading": "HTML 4.01 Specification W3C 勧告. 7.3 The HTML element",
"sub": "W3C勧告1999年12月24日",
},
{
"title": "HTML 3.2 Reference Specification. W3C Recommendation 14-Jan-1997.",
"href": "https://www.w3.org/TR/2018/SPSD-html32-20180315/",
"heading": "HTML 3.2 Reference Specification",
"sub": "W3C勧告1997年1月14日",
},
{
"title": "Hypertext Markup Language - 2.0. November 1995.",
"href": "https://www.ietf.org/rfc/rfc1866.txt",
"heading": "Hypertext Markup Language - 2.0",
"sub": "November 1995",
},
{
"title": "Hypertext Markup Language (HTML). June 1993.",
"href": "https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt",
"heading": "Hypertext Markup Language (HTML)",
"sub": "June 1993",
},
{
"title": "MDN Web Docs. HTML <html>: The HTML Document / Root element.",
"href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/html",
"heading": "MDN Web Docs. HTML <html>: HTML 文書 / ルート要素",
},
],
"version": {
"first": "HTML",
"latest": "HTML Living Standard",
},
}
}
注意: 簡易に描画する為に、各項目の後ろに
,
を付与しています。JSON の形式では、末尾の項目の後には,
は付けません。 - 最終確認日
-
2024-09-01
2.使用できるコンテキスト
html要素
は、
HTML文書の
ルートとなる
要素です。
html
逆に、あるべき箇所にhtml
(文書のドキュメント要素は、その文書を親とする要素が存在する場合はその要素であり、そうでない場合はnullである。)
HTML文書の基点
html開始タグ
の前
<h2>html要素の外側</h2>
外側のテキスト
<html lang=
"ja"> <head>
<meta charset=
"UTF-8"> <title>離珠のHTMLでしぃ!</title>
</head>
<body>
内側の先頭テキスト
<p>このページの言語は、
"<code id=
"icdJs001">〇〇</code>"です。</p> <p>このページの表題は、
"<code id=
"icdJs002">〇〇</code>"です。</p> <script>
document
.addEventListener( "DOMContentLoaded", function() { document
.getElementById( "icdJs001") . textContent
= document.documentElement .lang; document
.getElementById( "icdJs002") . textContent
= document.title; });
</script>
内側の<br>末尾テキスト
</body>
</html>
html終了タグの後に
<br><a href=
"./pahtml.htm" target= "_parent">html要素</a>へのリンクも追加してみました。
この例では、<iframe src=
とHTMLファイルを埋め込んで提示しています。このファイルの内容は、html
スクリプトで処理してみると、html
使用している外部ファイルへのリンクは、「./omittedhtml.htm」です。
3.コンテンツモデル
html要素
は、
head要素と
body要素を
配置できます。
html
尚 HTML4.01 Frameset でなら、1つのhead
<!DOCTYPE html>
<html lang=
"ja"> <head>
<meta charset=
"UTF-8"> <title>離珠のHTMLでしぃ!</title>
</head>
<body>
</body>
</html>
html
ツリーで表すと、html
<!DOCTYPE html>
<html lang=
"ja"> <meta charset=
"UTF-8"> <title>離珠のHTMLでしぃ!</title>
<p>タグが省略された例</p>
</html>
head
4.コンテンツ属性
html要素
は、
グローバル属性のみ
設定できます。
html
lang
manifest
versiondata-version
とでも置き換えるのが良いでしょう。
lang属性
<html lang=
"ja">
lang
その値は、有効な言語タグ、または空の文字列である必要があります。属性を空の文字列に設定すると、1次言語が不明であることを示します。これらの属性
この例では、"ja
"(日本語) をhtml
5.DOM インターフェイス
documentの
プロパティである
documentElementは、
ルート要素である
html要素を返します。
htmldocument
のプロパティであるdocumentElement
を用います。これは、ルート要素であるhtml
document
の querySelector()メソッド等を用いる事も考えられますが、このプロパティで充分でしょう。
このページの言語は、
"〇〇
"です。
<p>このページの言語は、
"<code id=
"icdJs501">〇〇</code>"です。</p> <script>
document
.addEventListener( "DOMContentLoaded", function() { document
.getElementById( "icdJs501") .textContent = document .documentElement ;.lang });
</script>
html
6.レンダリング
html {
display: block;
}
htmlblock
であり、ブロック
html
ルート要素が存在する包含ブロックは、初期包含
ルート要素の背景がキャンバスの背景になり、その背景のペイント領域がキャンバス全体をカバーするように拡張されます。 ルート要素はこの背景を再度ペイントしません。つまり、背景の使用値は透明です。
html
コンテキスト
ボックスで表すと、html
html
head
尚、この説明は各要素のレンダリングに関する指定が既定値での話で、個々にスタイルを指定した場合はこの限りではありません。
リセットCSS
html {
line-height: 1.15;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
これは、リセットCSSのnormalize.cssのhtml
line-height
は、すべてのブラウザで行の高さを修正します。
-webkit-tap-highlight-color
は、iOS で方向を変更した後のフォントサイズの調整を防止します。
html要素の高さ
ルート要素 (html要素) が存在する包含ブロックは、初期包含ブロックと呼ばれる長方形です。
<!DOCTYPE html>
<html lang=
"ja"> <head>
<meta charset=
"UTF-8"> <title>html要素の高さ - [離珠のHTMLでしぃ!]</title>
<style>
html { border: solid 1px #ff0000; box-sizing: border-box; }
html { border: solid 1px #0000ff; box-sizing: border-box; }
</style>
</head>
<body>
<a href=
"./pahtml.htm" target= "_parent">html要素</a>のページに戻るリンクです。 <h1 title=
"Height of html element.">html要素の高さ</h1> <p>Height of html element.</p>
<hr>
<form onchange=
"document .documentElement .style .height = document .getElementById( 'iseJs001') .value;"> このhtml要素の高さは、<select id=
"iseJs001"> <option value=
"auto"> auto </option> <option value=
"100%"> 100% </option> <option value=
"100vh"> 100vh </option> </select>です。
</form>
<form onchange=
"document .body .style .height = document .getElementById( 'iseJs002') .value;"> このbody要素の高さは、<select id=
"iseJs002"> <option value=
"auto"> auto </option> <option value=
"100%"> 100% </option> <option value=
"100vh"> 100vh </option> <option value=
"calc(100% - 16px)"> calc(100% - 16px) </option> <option value=
"calc(100vh - 18px)"> calc(100vh - 18px) </option> </select>です。
</form>
<form onchange=
"document .documentElement .style .fontSize = document .getElementById( 'iseJs003') .value + 'em';"> この文字の大きさは、<input id=
"iseJs003" type= "number" max= "5.0" min= "0.5" step= "0.5" value= "1.0">emです。 </form>
</body>
</html>
この例では、<iframe src=
html
使用している外部ファイルへのリンクは、「./heighthtml.htm」です。
インラインレベルのコンテンツのみを含む
<!DOCTYPE html>
<html lang=
"ja"> <head>
<meta charset=
"UTF-8"> <title>html要素でインラインフォーマットコンテキストを確立 - head要素, title要素, body要素のdisplayプロパティの値を全て inline にして、html要素をインラインレベルのコンテンツのみを含む状態にし、インラインフォーマットコンテキストを確立させる。 - [離珠のHTMLでしぃ!]</title>
<style>
head, title, body { display: inline; }
body { border: double 3px #ff0000; }
</style>
</head>
<body>
<a href=
"./pahtml.htm" target= "_parent">html要素</a>のページに戻ります。 </body>
</html>
この例では、<iframe src=
headinline
にした場合は、
使用している外部ファイルへのリンクは、「./inlinetitle.htm」です。
背景
ルート要素の背景がキャンバスの背景になり、その背景のペイント領域がキャンバス全体をカバーするように拡張されます。
ルート要素がhtmlbackground-image
の計算値が none
で、その background-color
が transparent
である場合は、
この内容の参照元は、「CSS Backgrounds and Borders Module Level 3」です。
7.気を付ける点
タグの省略の扱い
html
また記述する側としては、html
これに関して重要な事は、意図せずhtml
<!DOCTYPE html>
<title>離珠のHTMLでしぃ!</title>
<h1>離珠のHTMLでしぃ!</h1>
タグを省略しています。
タグの記述を省略しているだけで、要素は存在しています。
基点要素の扱い
html
呼称
html
このサイトでは、英字の大文字, 小文字でそれらを区別して表現するようにしています。<html>
も <HTML>
も <Html>
も同じです。
CSSリセット
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;;
}
normalize.css というリセットCSS の一部です。すべてのブラウザで行の高さを修正します。
iOSで向きを変更した後のフォントサイズの調整を防止します。
詳細は理解していないのですが、いろいろとバグ等の対応も含んでいる様なので、リセットCSSを利用する事をお勧めします。
使用できるARIAの役割なし
この要素は、「使用できるARIAの役割、状態、およびプロパティ」で「役割なし、またはaria-*属性」とあります。role=document
を明示したいといって<html lang=