| HTML |
|---|
HTML要素(HTMLようそ、英: HTML element)の記事では、HTML文書を構成する各種の要素を解説する。なお、一般に「HTML要素」と言った場合、HTML文書において「html」というタグ名のルート要素を指すことが多い。
例)
<strong>強調部分です。</strong>
要素 (element) は、開始タグ (Start-tag)・内容 (Content)・終了タグ (End-tag) の3つから構成される[注 1]。要素は<と>で囲まれる開始タグで始まり、</と>で囲まれる終了タグで終わる。開始タグと終了タグではさまれた部分が内容となる。また開始タグ内に、任意個の、属性 (attribute) と属性値 (value) のペア(HTML属性(HTML attribute))を含むことができる。
「要素」と「タグ」はこのような関係にあり、明確に区別し、用語も明確に使い分ける必要がある。
また、XMLでは、開始タグや終了タグとは別に、空要素のための空要素タグ (Empty-Element Tags)が規程されている。空要素タグは<と/>で囲まれ、内容を持たない。意味は<elem></elem>のように記述された場合と基本的には全く同じに扱われる(ツール類の実装によっては、内部では識別しているものもある)。
HTMLを表記するための構文は、独自のHTML構文とXMLアプリケーションであるXML構文に大別される。HTML構文は、HTML 2~4.01までの間SGMLアプリケーションとして定義されていた。しかし、現実にはウェブブラウザのほとんどでSGMLとして処理されることはなく、そのためSGMLであることをやめて独自に構文を定義するようになった[1][2]。もう一方のXML構文はXHTMLに由来する。
HTML構文とXML構文の相違は以下のようになる。
一部の開始タグ・終了タグは省略可能と定義されている[3][4]。また、空要素 (void elements)と指定されている要素では開始タグのみを記述し、終了タグを書いてはならない[5][6]。
HTML 4.01までは、SGMLの省略タグ機構によって同様のタグの省略が認められていた。
XMLはタグの省略は不可能である。そのため、XMLアプリケーションであるXML構文では空要素を表現する場合、次のうちどちらかを用いる必要がある。
<要素名 />」や「<要素名/>」を使う。<要素名></要素名>」)。なお、古いユーザーエージェントのためには、前者のうち「/>」の前にスペースを入れる記述が推奨されている[7]。
属性に関して次のような省略が可能である。
XHL構文では、HTML構文で許されていた属性に関する省略は不可能である。これはXMLの特徴に因る。
htmlheadbodyHTML文書は、ヘッダ部分と本体部分の2つに分けることができる。2007年11月現在で有効なスキーマでは、ルート要素であるhtml要素の直下にはhead要素、body要素をこの順で1つずつだけ取ることができる。
HTML文書は次のような構造となる。
<html>
<head>
head要素以下に取ることができる要素群。
title要素などをはじめとしたそのHTML文書自身に関する情報からなる。
</head>
<body>
body要素以下に取ることができる要素群。
HTML文書の本文となる情報を記述する。
</body>
</html>
titlebaselinkmetaobjectparamstylescriptinsdelpblockquotepredivnoscripthraddressformfieldsetlegend以下にfieldset要素とlegend要素の記述例を示す。
<form action="http://...">
<fieldset>
<legend>名前</legend>
<label>姓:<input type="text"></label>
<label>名:<input type="text"></label>
</fieldset>
<fieldset>
<legend>住所</legend>
<label>県:<input type="text"></label>
<label>市:<input type="text"></label>
</fieldset>
</form>
h1〜h6ulollidldtdd表形式のデータを表す要素群。その特性からレイアウトに使用されることがあるが間違いである。
また正しくマークアップする為には(他の要素に比べ)多少の知識を要する。これは音声ブラウザの挙動など、アクセシビリティを考慮した場合に制約が多いため。
tablecaptionthead、tfoot、tbodycolgroupcoltrth、td以下にtable要素の記述例を示す。
<table summary="取り扱い商品の一覧表。商品ごとに価格・備考を表記する。" border="1">
<capthion>商品一覧</capthion>
<colgroup class="head" span="1"></colgroup>
<colgroup class="data" span="2"></colgroup>
<thead>
<tr>
<th id="t1">商品名</th>
<th id="t2" abbr="価格">価格(円)</th>
<th id="t3" abbr="備考">備考(産地・在庫など)</th>
</tr>
</thead>
<tbody>
<tr><td headers="t1">りんご</td><td headers="t2">100</td><td headers="t3">青森産</td></tr>
<tr><td headers="t1">みかん</td><td headers="t2">150</td><td headers="t3">在庫無し</td></tr>
</tbody>
</table>
見た目を定義する要素。スタイルシートで代替が可能。これらのうち、i、bなどはHTML5以降、新たに意味づけがなされており[10]、単なる見た目を定義する要素ではなくなっている。
ibusstrikestrikeはHTML5で廃止された。sあるいはdelで代替。bigsmall論理的な意味を表現する要素。
emstrongdfncodesampkbdvarciteabbracronymaaudiocanvasimgvideo<!-- ここにコメントを書く -->コメント内の文字は、ブラウザによって処理(表示)されないで無視される。 コメントは入れ子構造できない。
HTML要素の振る舞いを取得・変更するにはAttributeを介した手法とPropertyを介した手法が存在する。AttributeとPropertyは互いの変更が反映されるように定義されている場合が多いが、必ずしもそうとは限らない(各HTML要素の定義による)。
HTMLの要素(Elements)はattributesをもつ[11][12]。またElementsはWeb IDLで記述されるDOM interfaceをもち、その中にWeb IDLのattributesをもつ[13][14]。2つのattributesを呼び分けるために、前者のHTML attributesはContent attributes、後者のWebIDL attributeはIDL attributesと呼ばれる[15]。JavaScriptはWeb IDLで書かれたDOM interfaceを実装することでWebページの操作を可能にしており、その際IDL attributesはJavaScript object propertiesとして実装されるため、しばしば俗称としてContent attributesはattribute、IDL attributesはpropertyと呼ばれる[16]。
| 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)する、と定義されている[17]。reflectされるか否かは要素ごとにきまり、統一されたルールはない[18]。
未登録
IPFS未登録
📡 0ピア
N=1
CRITICAL
PQS A84