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

要素の種類

1.要素の種類

HTMLの要素は、
6つの異なる種類が
存在します。

HTMLの要素は、空要素, 雛型要素, 生テキスト要素, エスケープ可能な生テキスト要素, 外来要素, 通常要素と6つの異なる種類が存在します。

2.空要素

空要素は、
任意のコンテンツを
持つことができない
要素です。

空要素 (Void elements.)は、任意のコンテンツを持つことができない要素です。

以下の要素が空要素です。

meta要素, base要素, link要素, col要素, input要素, hr要素, source要素, img要素, embed要素, param要素, track要素, area要素, br要素, wbr要素
  1. <img src="../Img/G00/demo.gif">
  2. <hr>
  3. <input value="TEXT" style="width: 4em;">
  • <img src="../Img/G00/demo.gif"> : img要素(img要素開始タグ)
  • <hr> : (hr要素開始タグ)
  • <input value="TEXT" style="width: 4em;"> : input要素(input要素開始タグ)

空要素は終了タグが存在しません。

3.雛型要素

雛型要素は、
テンプレートコンテンツを
持つことができる
要素です。

雛型要素 (The template element.)は、テンプレートコンテンツを持つことができる要素です。(テンプレートコンテンツは雛型要素自体の子ではありません。)

以下の要素が雛型要素です。

template要素
  1. <div id="JDV0311">
  2. <div>見本</div>
  3. </div>
  4. <template id="JTP0311">
  5. <div>雛型１</div>
  6. </template>
  7. <template id="JTP0312">
  8. <div>雛型２</div>
  9. </template>
  10. <script>
  11. if ('content' in document.createElement('template')) {
  12. var leHtmlTemplate = document.getElementById('JTP0312');
  13. var leHtmlClone = document.importNode(leHtmlTemplate.content, true);
  14. document.getElementById('JDV0311').appendChild(leHtmlClone);
  15. }
  16. </script>
  • <template id="JTP0311"><div>雛型１</div></template> : template要素
    • <template id="JTP0311"> : template要素開始タグ
    • <div>雛型１</div> : テンプレートコンテンツ
    • </template> : template要素終了タグ

雛型要素は、テンプレートコンテンツを別の Documentに関連付けられた DocumentFragmentに保存します。自身の子はありません。「ノードを子の前に挿入する／子をノードに置換する」アルゴリズムに影響します。

見本

4.生テキスト要素

生テキスト要素は、
テキストを
持つことができる
要素です。

生テキスト要素 (Raw text elements.)は、テキストを持つことができる要素です。

以下の要素が生テキスト要素です。

script要素, style要素
  1. <style>body {color: red;}</style>
  2. <script>alert('ここにスクリプトが書けます。');</script>
  • <style>body{color:red;}</style> : style要素
    • <style> : style要素開始タグ
    • body{color:red;} : コンテンツ(テキスト)
    • </style> : style要素終了タグ
  • <script>alert('ここにスクリプトが書けます。');</script> : script要素
    • <script> : script要素開始タグ
    • alert('ここにスクリプトが書けます。'); : コンテンツ(テキスト)
    • </script> : script要素終了タグ

生テキスト要素は、テキストを持つことができる要素です。但し、script要素はスクリプト言語を記述する要素であり, style要素はスタイルシート言語を記述する要素であるので、それぞれの言語の制約も受けます。HTML言語としての制約も受けます。

5.エスケープ可能な生テキスト要素

エスケープ可能な
生テキスト要素 は、
テキストおよび文字参照を
持つことができる
要素です。

エスケープ可能な生テキスト要素 (Escapable raw text elements.)は、テキストおよび文字参照を持つことができる要素です。

以下の要素がエスケープ可能な生テキスト要素です。

textarea要素, title要素
  1. <title>HTMLの要素 &lt;離珠のHTML&gt;</title>
  2. <textarea>&lt;textarea&gt;</textarea>
  • <title>HTMLの要素 &lt;離珠のHTML&gt;</title> : title要素
    • <title> : title要素開始タグ
    • HTMLの要素 &lt;離珠のHTML&gt; : コンテンツ(テキスト, 文字参照)
    • </title> : title要素終了タグ
  • <textarea>&lt;textarea&gt;</textarea> : textarea要素
    • <textarea> : textarea要素開始タグ
    • &lt;textarea&gt; : コンテンツ(テキスト, 文字参照)
    • </textarea> : textarea要素終了タグ

エスケープ可能な生テキスト要素は、テキストおよび文字参照を持つことができる要素です。文字参照は、他の方法で合法的にテキストに含めることができない文字をエスケープするために使用できます。

6.外来要素

外来要素は、
MathML名前空間と
SVG名前空間の
要素です。

外来要素 (Foreign elements.)は、MathML名前空間(MathML namespace.) と SVG名前空間(SVG namespace.) の要素です。

7.通常要素

通常要素は、
上記５種類以外の
要素です。

上記５種類以外のすべての許可されたHTMLの要素は、通常要素です。 通常要素 (Normal elements.)は、テキスト, 文字参照, 他の要素, およびコメントを持つことができます。一部の通常要素は、コンテンツモデルなど個々によって持つ事ができるコンテンツに制限があります。