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

HTMLの要素

1.要素

要素は、
HTMLではそれを構成する
元の事です。

要素 とは、物事を成り立たせる元の事です。
HTMLでは、それを構成する元の事を要素(エレメント・Element)と言っています。HTMLは要素の集まりで、それぞれの要素がいくつかの属性で修飾される事があります。それぞれの要素がコンテンツを持ったりもします。

HTMLは、マークアップ言語でありテキスト(文字)データ中に特定の記号で囲まれたタグ(tag)と呼ばれる表記を用いて構造や見栄えなどを記述しています。
開始タグに属性を記述する事で、要素を修飾する事があります。また、コンテンツを持たない要素もあり終了タグはなく開始タグのみの要素もあります。

タグは、マークアップ内の要素の開始と終了を区切るために使用されます。 生のテキストの要素, エスケープ可能な生のテキストの要素, および通常の要素には、開始位置を示す開始タグと、終了位置を示す終了タグがあります。 空要素には開始タグのみがあり、終了タグを指定しないでください。 外部要素には、開始タグと終了タグ、または自己終了としてマークされた開始タグが必要です。後者の場合、終了タグは使用できません。

要素の内容は、開始タグの直後 (場合によっては暗示される) と終了タグの直前 (これも場合によっては暗示される) の間に配置する必要があります。 個々の要素に許可される内容は、その要素のコンテンツモデルによって異なります。 要素には、そのコンテンツモデルで許可されない内容を含めることはできません。 ただし、これらのコンテンツモデルによって内容に課される制限に加えて、5 種類の要素には追加の構文要件があります。

  1. <a href="./index.htm">TOP PAGE</a><hr class="ehrSample">
  • <a href="./index.htm">TOP PAGE</a> : a要素
    • <a href="./index.htm"> : a要素開始タグ
    • TOP PAGE : テキスト文字列。コンテンツ
    • </a> : a要素終了タグ
  • <hr class="ehrSample"> : hr要素
    • <hr class="ehrSample"> : hr要素開始タグ
    • コンテンツはない
    • hr要素終了タグはない。記述は禁止

HTMLはタグ(tag)で要素を表します。タグ中の改行などはコードの見た目やコンテンツには関わりますが要素を表すのには関わりません。

要素は、空要素, 雛型要素, 生テキスト要素, エスケープ可能な生テキスト要素, 外来要素, 通常要素 と6つの異なる種類が存在します。
要素の種類については、別のページで記述しています。

2.開始タグ

開始タグは、
要素の始まりを
示す札です。

  1. <a href="./index.htm">
  • < : 開始タグ開始区切り子
  • a : タグ名(a要素)
  • href= "./index.htm" : 属性
    • href : 属性名(href属性)
    • = : 等号
    • " : 二重引用符
    • ./index.htm : 属性値
    • " : 二重引用符
  • > : 開始タグ終了区切り子

開始タグ は、要素の始まりを示します。また開始タグに属性を記述する事で、要素を修飾する場合があります。

開始タグの記述を省略できる場合もありますが、一定の規則に従って既定の位置に記述されている物と処理されるだけで要素がない訳ではありません。
html要素, head要素, body要素 などの開始タグが条件付きで省略できます。

  1. <math>
  2. <mi>x</mi>
  3. <mspace width="3em"/>
  4. <mi>y</mi>
  5. </math>
  • < : 開始タグ開始区切り子
  • mspace : タグ名(mspace要素)
  • width= "3em" : 属性
    • width : 属性名(width属性)
    • = : 等号
    • " : 二重引用符
    • 3em : 属性値
    • " : 二重引用符
  • /> : 自己終了としてマークされた開始タグ終了区切り子

自己終了としてマークされた開始タグは、要素の始まりを示します。またこの場合は、終了タグは使用できません。

3.終了タグ

終了タグは、
要素の終わりを
示す札です。

  1. </a>
  • </ : 終了タグ開始区切り子
  • a : タグ名(a要素)
  • > : 終了タグ終了区切り子

終了タグ は、要素の終わりを示します。要素によっては、コンテンツ, 終了タグを持たない要素もあります。

終了タグの記述を省略できる場合もありますが、一定の規則に従って既定の位置に記述されている物と処理されるだけでコンテンツがない訳ではありません。

4.属性

属性は、
その事物が持っている
性質です。

HTMLの要素の属性は、要素を調整したり、さまざまな方法で振る舞いを調整したりする為の付加的な値です。

要素の属性は、要素の開始タグ内で表現されます。

属性には名前と値があります。 属性名は、制御文字, U+0020 SPACE, U+0022 (")、U+0027 (')、U+003E (>)、U+002F (/)、U+003D (=)、および非文字以外の 1 つ以上の文字で構成されている必要があります。 HTML構文では、属性名は、外来要素の属性であっても、ASCII 小文字と ASCII 大文字の任意の組み合わせで記述できます。

属性値は、テキストと文字参照の組み合わせですが、テキストにあいまいなアンパサンドを含めることができないという追加の制限があります。

属性の後に別の属性が続く場合は、2 つの属性を ASCII 空白で区切る必要があります。

同じ開始タグに、ASCII の大文字と小文字を区別せずに名前が一致する 2 つ以上の属性があってはなりません。

属性にはグローバル属性という括りがあり、それは HTMLの全ての要素で共通の属性です。全ての要素で使用できますが、要素によっては効果がない事もあります。他に要素個々に固有の属性があったりします。

空の属性構文

  1. <input hidden>

属性名だけです。属性値は暗黙的に空の文字列です。

引用符で囲まれていない属性値の構文

  1. <input value=AttributeValue>

属性名の後に 0 個以上の ASCII 空白文字が続き、その後に 1 つの U+003D ( = : 等号) が続いて、その後に 0 個以上の ASCII 空白文字が続き、その後に属性値が続きます。
属性値は、空の文字列であってはなりませんし、 リテラル ASCII 空白文字, U+0022 ( " : 二重引用符), U+0027 ( ' : 一重引用符), U+003D ( = : 等号), U+003C ( < : 左山括弧), U+003E ( > : 右山括弧), U+0060 ( ` : 重アクセント文字) を含める事はできません。

単一引用符で囲まれた属性値の構文

  1. <input value='Attribute Value'>

属性名の後に 0 個以上の ASCII 空白文字が続き、その後に 1 つの U+003D ( = : 等号) が続いて、その後に 0 個以上の ASCII 空白文字が続き、その後に属性値を囲む様に U+0027 ( ' : 一重引用符) が続きます。 属性値が続いて、最後にまた属性値を囲む様に U+0027 ( ' : 一重引用符) が続きます。
属性値に U+0027 ( ' : 一重引用符) を含める事はできません。

二重引用符で囲まれた属性値の構文

  1. <input value="Attribute Value">

属性名の後に 0 個以上の ASCII 空白文字が続き、その後に 1 つの U+003D ( = : 等号) が続いて、その後に 0 個以上の ASCII 空白文字が続き、その後に属性値を囲む様に U+0022 ( " : 二重引用符) が続きます。 属性値が続いて、最後にまた属性値を囲む様に U+0022 ( " : 二重引用符) が続きます。
属性値に U+0022 ( " : 二重引用符) を含める事はできません。

5.コンテンツ

コンテンツは、
情報の中身です。

HTMLの要素のコンテンツは、要素の内容, 中身です。
要素の内容は、開始タグの直後 (場合によっては暗示される) と終了タグの直前 (これも場合によっては暗示される) の間に配置する必要があります。要素ごとに記述が認められているコンテンツが異なるので、要素ごとに調べる必要があります。要素の子および子孫として含める必要のあるコンテンツの規範的な説明を、コンテンツモデルと言います。
各要素のコンテンツモデルを定義するときに使用されるカテゴリについては、こちらで記述しています。 ただし、これらのコンテンツモデルによって内容に課される制限に加えて、6 種類の要素には追加の構文要件があります。

空要素
コンテンツを含めることはできません。 (終了タグがないため、開始タグと終了タグの間にコンテンツを配置することはできません)
template要素

テンプレートコンテンツを含めることができますが、そのようなテンプレートコンテンツはtemplate要素自体の子ではありません。 代わりに、テンプレートコンテンツがメインのドキュメントに干渉しないように、ブラウジングコンテキストなしで、別のドキュメントに関連付けられた DocumentFragment に格納されます。 template要素のテンプレートコンテンツのマークアップは、template要素の開始タグの直後と終了タグの直前に配置されます (他の要素と同様)。 マークアップは任意のテキスト, 文字参照, 要素, コメントで構成できますが、テキストには U+003C LESS-THAN SIGN (<) 文字やあいまいなアンパサンドを含めることはできません。

生テキスト要素

テキストを含めることができます。 文字列 "</" (U+003C LESS-THAN SIGN、U+002F SOLIDUS) の後に、要素のタグ名と大文字小文字を区別せずに一致する文字が続き、その後に U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED (LF), U+000C FORM FEED (FF), U+000D CARRIAGE RETURN (CR), U+0020 SPACE, U+003E GREATER-THAN SIGN (>), または U+002F SOLIDUS (/) のいずれかが続く文字列が含まれていてはなりません。

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

テキストと文字参照を含めることができますが、テキストにはあいまいなアンパサンドを含めることはできません。 文字列 "</" (U+003C LESS-THAN SIGN、U+002F SOLIDUS) の後に、要素のタグ名と大文字小文字を区別せずに一致する文字が続き、その後に U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED (LF), U+000C FORM FEED (FF), U+000D CARRIAGE RETURN (CR), U+0020 SPACE, U+003E GREATER-THAN SIGN (>), または U+002F SOLIDUS (/) のいずれかが続く文字列が含まれていてはなりません。

外来要素

開始タグが自己終了としてマークされている外来要素には、コンテンツを含めることはできません (終了タグがないため、開始タグと終了タグの間にコンテンツを配置することはできません)。 開始タグが自己終了としてマークされていない外来要素には、テキスト, 文字参照, CDATA セクション, その他の要素, およびコメントを含めることができますが、テキストには文字 U+003C LESS-THAN SIGN (<) またはあいまいなアンパサンドを含めることはできません。

通常要素

テキスト, 文字参照, その他の要素, コメントを含めることができますが、テキストには U+003C LESS-THAN SIGN (<) 文字やあいまいなアンパサンドを含めることはできません。 table要素には、この仕様で説明されているコンテンツモデルに従って技術的にテーブル要素内に入れることが許可されているにもかかわらず、tr要素を含めることはできません。(マークアップで tr要素がテーブル内に置かれた場合、実際にはその前に tbody開始タグが暗黙的に存在します。) pre要素と textarea要素の開始タグの直後に、1 つの改行を配置できます。これは要素の処理には影響しません。要素のコンテンツ自体が改行で始まる場合は、通常はオプションの改行を含める必要があります (そうしないと、コンテンツの先頭の改行がオプションの改行として扱われ、無視されるため)。

あいまいなアンパサンド (An ambiguous ampersand) とは、 U+0026 アンパサンド文字 (&) の後に 1 つ以上の ASCII 英数字が続き、その後に U+003B セミコロン文字 (;) が続くもので、 これらの文字は名前付き文字参照セクションで指定された名前のいずれとも一致しません。
言い換えると、U+0026 ( & : アンパサンド文字) で始まると、そこから文字参照と推察され、 アンパサンドの後に、U+0023 NUMBER SIGN 文字 (#) が続くと、数値文字参照と推察され、 アンパサンドの後に、ASCII 英数字が続き、その後に U+003B セミコロン文字 (;) が続くと、文字実体参照, 名前付き文字参照と推察され、 その ASCII 英数字が名前付き文字参照セクションで指定された名前のいずれかが、同じ大文字小文字を使用して一致すれば、文字実体参照, 名前付き文字参照と称して、 一致しなければ、あいまいなアンパサンドと称するようです。

6.テキスト

テキストは、
要素, 属性値, コメント内で
使用できます。

テキストは、要素, 属性値, コメント内で使用できます。 テキストを配置する場所に基づいて、テキスト内で何が許可され、何が許可されないかについて追加の制約が課されます。

HTML の改行は、U+000D ( CR : キャリッジリターン文字), U+000A ( LF : ラインフィード文字), または U+000D ( CR : キャリッジリターン文字) と U+000A ( LF : ラインフィード文字) のペア (この順序) のいずれかで表すことができます。 文字参照が許可されている場合、U+000A ( LF : ラインフィード文字) の文字参照 (U+000D CR : キャリッジリターン文字は不可) も改行を表します。

テキストの利用目的にも、注意しましょう。閲覧者への表示用の情報なのか, スクリプトなどへの処理用のデータなのか。 閲覧用の場合は文字参照の活用が有効な場合がありますが、処理用のデータだとエンコード, デコードなどの処理が発生する可能性も検討しなければいけなくなります。

7.要素の入れ子

入れ子は、
あるものの中に、
それと同じ形や種類の
(一回り小さい)ものが
入っている状態や
構造のことです。

要素の中に要素を入れられます。[要素のコンテンツの一部として、要素を配置できます。] これを入れ子(ネスト)と言います。どの要素のコンテンツとしてその要素を記述して良いのか規則があります。

  1. <div><a href="./index.htm">TOP PAGE</a> (リンク先はトップページです。)</div>

div要素の中に、a要素を入れた例です。

8.気を付ける点

文字参照

文字列として U+003C ( < : 左山括弧) を用いたい場合は、 &lt; と文字参照を用いておくべきです。U+003E ( > : 右山括弧) を用いたい場合は、 &gt;を用いておく習慣を付けておくべきです。属性値については、二重引用符で囲まれた属性値の構文を採用して、U+0022 ( " : 二重引用符) を用いたい場合は、 &quot;を用いておくべきです。Pug(パグ)というテンプレートエンジンを使用した時の属性値が、二重引用符で囲まれた属性値の構文を採用していたので、それで統一した方が良いかなと言うだけの理由です。

「文字参照」で改めて記述しています。

  1. <div>&lt;div>TEXT&lt;/div></div>

< (左山括弧) は &lt; と文字実体参照を用います。

<div>TEXT</div>
  1. <input value="&gt;右山括弧">

> (右山括弧) は &gt; と文字実体参照を用います。

  1. <input value="&quot;引用符&quot;">

" (二重引用符) は &quot; と文字実体参照を用います。

  1. <input value="&apos;単一引用符&apos;">

' (一重引用符) は &apos; と文字実体参照を用います。

  1. <input value=Attribute&nbsp;Value>

  (空白) は &nbsp; と文字実体参照を用います。&nbsp; は制御コードなので、空白そのままを文字参照で表したい場合は &#32; と数値文字参照を用います。

まとまり

HTMLのタグには省略できる物もあります。しかし誤って省略不可の終了タグなどを忘れると、兄弟要素や親要素の後続の記述にも効果が及びます。

意味

要素にはそれぞれ意味があるので、単なる装飾で要素を選択するべきではありません。
CSSを用いず HTMLだけの見た目だけに意味がある作品ならば別ですが、読んでもらう事にも意味がある場合はHTMLの要素の意味も意識するツールへの配慮も必要でしょう。

用語

<html>は、html開始タグであってhtml要素ではありません。HTML言語では、タグ(tag)で要素(Element)を表すと言う事を理解する, タグ(tag)という物を意識すると、その先のスクリプト等でデータを扱うという処で作業がやりやすいと思います。
HTMLのコードをプログラムで記述(出力)しても良い訳ですから・・・。