HTMLのタグと要素の違い【現役エンジニアが解説】

PROGRAM

今回は、HTMLのタグと要素の違いについて、それぞれに分け、簡単に解説していきます。

タグの基本

タグとは、<と>で囲われたものを指します。

HTMLはタグを配置することでページを表現していきます。

<div>
</div>
<span>
</span>
<input>

上記のような開始タグである<div>や終了タグである</div>等の各行が一つのタグです。

要素の基本

開始タグから終了タグまでをまとめて要素と言います。

ただし、input要素等の場合は、開始タグのみで終了タグを付ける必要はありません。

<div></div>
<span></span>
<input>

上記の各行のように、div要素やspan要素等は開始タグと終了タグで一つの要素、input要素等は開始タグで一つの要素です。

インデント

HTMLでは、div等のブロック要素の場合、開始タグと終了タグの間は字下げします。

一方で、コンテンツ量が少ない場合やspan等のインライン要素の場合には、字下げをしないことが一般的です。

<div>
    <span>ほげ</span>
</div>

上記のコードでは、div要素の中身については字下げをしていますが、span要素の中身に関しては表示の問題で字下げをしていません。