要素 - タグで囲んだ全体

要素とタグの違い

要素とタグの違いは、「タグで要素を作る」と考えると分かりやすいです。例えば、下記はpの開始タグです。

<p>

続いて、下記はpの終了タグです。

</p>

pの開始タグと終了タグでテキストを囲んで出来た全体が、「p要素」というわけです。タグはパーツ、要素は全体です。この違いを理解しておくと、HTMLの説明文などを読んだ時に混乱を避けられます。

<p>今日は晴天です。</p>

imgタグのように、開始タグと終了タグがない場合があります。この場合、「imgタグ」と「img要素」の差が分かりづらいですが、ニュアンス的に「要素」は全ての属性値が指定された後の完成品を指すと考えて良いでしょう。「imgタグに属性を指定して、img要素を作る」といった具合です。

<!-- imgタグに属性を指定して… -->
<img>

<!-- img要素が完成した -->
<img src="..." width="200" height="100">

要素が要素を構成する

要素が部品の位置付けになることも、もちろん、あります。例えば、下記はtable要素です。tableは、th要素やtd要素などが集まってできた要素ですよね。

<table>
	<thead>
		<tr><th>賞品名</th><th>定価</th><th>割引価格</th></tr>
	</thead>
	<tbody>
		<tr><td>鉛筆</td><td>5,000円</td><td>50円</td></tr>
		<tr><td>消しゴム</td><td>10,000円</td><td>100円</td></tr>
	</tbody>
</table>