＜html要素＞ - ドキュメントのルートとなる要素

公開日: 2017/02/08

html要素は、HTMLのドキュメントツリーにおけるルート(最上位)となる要素です。この要素にlang属性を付けて、文書全体の言語を明示することを推奨されています。

概要

名前

html

カテゴリー

なし。

配置できる場所

HTMLドキュメントの最上位。

コンテンツモデル

head要素と、それに後続するbody要素。

タグの省略

html要素の最初の子ノードがコメントじゃない場合、開始タグを省略できる。

html要素の最初の子ノードがコメントじゃなく、かつ、body要素が空じゃないか、または開始タグを持っている場合、終了タグを省略できる。

DOM Interface

HTMLHtmlElement

デフォルトのスタイル

html {
	display: block;
}

仕様書

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

属性

manifest

アプリケーション・キャッシュを利用する時、ローカルにキャッシュされるべきコンテンツのURLを指定する。アプリケーション・キャッシュは古い技術のため、この属性とともに非推奨である。

グローバル属性

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

説明

ルートとは？

ルートとは最上位を指します。HTMLドキュメントにおいてhtml要素は親要素を持ちません。他の要素は全てhtml要素の子孫要素です。つまりルート(最上位)の要素ということです。

HTML

<!DOCTYPE html>
<html>
	<!-- 全てhtml要素の子孫要素 -->
</html>

言語の明示

html要素にlang属性を指定することが推奨されています。翻訳ツールや音声ソフトが解析する時に、ウェブページ全体の言語を判断できます。

HTML

<!DOCTYPE html>
<html lang="ja">
	<!-- ... -->
</html>

サンプルコード

HTML

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

<h1>Welcome</h1>
<p>SYNCERにようこそ！</p>

	</body>
</html>

デモを開く

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

<!DOCTYPE html> <html> <head> <base href="/567/"> <meta charset="utf-8"> <title>【デモ】＜html要素＞ - ドキュメントのルートとなる要素</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/html/"> </head> <body>

<h1>Welcome</h1> <p>SYNCERにようこそ！</p>

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

<style>

body { background-color: #fff ; }

</style>

</script>