HTML要素(HTMLようそ、英: HTML element)の記事では、HTML文書を構成する各種の要素を解説する。なお、一般に「HTML要素」と言った場合、HTML文書において「html」というタグ名のルート要素を指すことが多い。

## 要素の構成

例)

要素 (element) は、開始タグ (Start-tag)・内容 (Content)・終了タグ (End-tag) の3つから構成される。要素は`<`と`>`で囲まれる開始タグで始まり、`</`と`>`で囲まれる終了タグで終わる。開始タグと終了タグではさまれた部分が内容となる。また開始タグ内に、任意個の、属性 (attribute) と属性値 (value) のペア(HTML属性(HTML attribute))を含むことができる。

「要素」と「タグ」はこのような関係にあり、明確に区別し、用語も明確に使い分ける必要がある。

また、XMLでは、開始タグや終了タグとは別に、空要素のための空要素タグ (Empty-Element Tags)が規程されている。空要素タグは`<`と`/>`で囲まれ、内容を持たない。意味は`<elem></elem>`のように記述された場合と基本的には全く同じに扱われる(ツール類の実装によっては、内部では識別しているものもある)。

### HTML構文とXML構文との違い

HTMLを表記するための構文は、独自のHTML構文とXMLアプリケーションであるXML構文に大別される。HTML構文は、HTML 2~4.01までの間SGMLアプリケーションとして定義されていた。しかし、現実にはウェブブラウザのほとんどでSGMLとして処理されることはなく、そのためSGMLであることをやめて独自に構文を定義するようになった。もう一方のXML構文はXHTMLに由来する。

HTML構文とXML構文の相違は以下のようになる。

#### タグの省略

##### HTML

一部の開始タグ・終了タグは省略可能と定義されている。また、空要素 (void elements)と指定されている要素では開始タグのみを記述し、終了タグを書いてはならない。

HTML 4.01までは、SGMLの省略タグ機構によって同様のタグの省略が認められていた。

##### XML

XMLはタグの省略は不可能である。そのため、XMLアプリケーションであるXML構文では空要素を表現する場合、次のうちどちらかを用いる必要がある。

- 空要素タグを使い「`<要素名 />`」や「`<要素名/>`」を使う。
- 開始タグの直後に終了タグを記述する(「`<要素名></要素名>`」)。

なお、古いユーザーエージェントのためには、前者のうち「`/>`」の前にスペースを入れる記述が推奨されている。

#### 属性の省略

##### HTML

属性に関して次のような省略が可能である。

- 属性値に以下の文字を含まない場合、属性値を括る引用符が省略可能。
  - ASCII空白文字
  - U+0022 二重引用符
  - U+0027 アポストロフィー
  - U+003D 等号
  - U+003C 不等号(より小)
  - U+003E 不等号(より大)
  - U+0060 グレイヴ・アクセント
- 空属性: 属性名が択一式である場合に属性名が省略可能。

##### XML

XHL構文では、HTML構文で許されていた属性に関する省略は不可能である。これはXMLの特徴に因る。

## HTML要素一覧

### 基本的な構造を表す要素

HTML文書は、ヘッダ部分と本体部分の2つに分けることができる。2007年11月現在で有効なスキーマでは、ルート要素であるhtml要素の直下にはhead要素、body要素をこの順で1つずつだけ取ることができる。

HTML文書は次のような構造となる。

### ブロックレベル要素

以下にfieldset要素とlegend要素の記述例を示す。

#### 表を構成する要素

表形式のデータを表す要素群。その特性からレイアウトに使用されることがあるが間違いである。

また正しくマークアップする為には(他の要素に比べ)多少の知識を要する。これは音声ブラウザの挙動など、アクセシビリティを考慮した場合に制約が多いため。

- ヘッダ要素のid属性と、データ要素のheaders属性を結びつける (同じ値を指定する)。これによって音声ブラウザではヘッダとデータの内容を交互に読み上げることが出来る。
- 上記の省略系といえるscope属性を用いる。ヘッダ属性にcolを指定することで縦方向・rowを指定することで横方向のデータと結びつけることが出来る。
- ヘッダ要素にabbr属性で短縮系を指定する。例えば、ヘッダ要素の内容が"価格(円)"等の場合、逐一読み上げるのは冗長になる。abbr属性が"価格"となっていれば、「価格100」等と読み上げられ、冗長さは解消される。

以下にtable要素の記述例を示す。

### インライン要素

#### 物理要素 (fontstyle)

見た目を定義する要素。スタイルシートで代替が可能。これらのうち、`i`、`b`などはHTML5以降、新たに意味づけがなされており、単なる見た目を定義する要素ではなくなっている。

#### 論理要素 (phrase)

論理的な意味を表現する要素。

## コメント

コメント内の文字は、ブラウザによって処理(表示)されないで無視される。
コメントは入れ子構造できない。

## AttributeとProperty

HTML要素の振る舞いを取得・変更するにはAttributeを介した手法とPropertyを介した手法が存在する。AttributeとPropertyは互いの変更が反映されるように定義されている場合が多いが、必ずしもそうとは限らない(各HTML要素の定義による)。

### 定義

HTMLの要素(Elements)はattributesをもつ。またElementsはWeb IDLで記述されるDOM interfaceをもち、その中にWeb IDLのattributesをもつ。2つのattributesを呼び分けるために、前者のHTML attributesはContent attributes、後者のWebIDL attributeはIDL attributesと呼ばれる。JavaScriptはWeb IDLで書かれたDOM interfaceを実装することでWebページの操作を可能にしており、その際IDL attributesはJavaScript object propertiesとして実装されるため、しばしば俗称としてContent attributesはattribute、IDL attributesはpropertyと呼ばれる。

Table. HTML attributesとWeb IDL attributes

| spec | formal name | formal alt. name | informal name |
| --- | --- | --- | --- |
| HTML | attributes | Content attributes | attributes |
| Web IDL | attributes | IDL attributes | properties |

歴史的理由・言語的制約などにより、対応するattributeとpropertyは必ずしも名前が一致しない。例えばclass attributeはclassName propertyに対応する。大半のattribute-propertyは名前が一致しているが一致しているか否かに規則性はなく、逐一仕様書を確認する必要がある。

### リフレクション

このようにHTML要素にはattribute(Content attribute)とproperty(IDL attribute)の2つの側面がある。あるattributeを変更したとき、対応するpropertyにも変更が反映されないとアクセスする方法によって得られる結果に矛盾が生じてしまう。それを防ぐために、いくつかのpropertyは対応するattributeを反映(reflect)する、と定義されている。reflectされるか否かは要素ごとにきまり、統一されたルールはない。

## 参考

- W3C HTML 4.01 Specification
- HTML Living Standard
  - HTML Living Standard 日本語訳