【HTML5】要素とタグの違いを理解する。親要素,子要素,子孫要素とは

要素とタグの違いについて

HTMLを勉強していると要素やタグの意味が段々と分からなくなってきますよね。
この記事では、以下のサンプルを使って要素とタグの違いについて整理してみます。

<!-- サンプル -->
<p>あいうえおABCDE</p>

タグとは

タグとは、上記サンプルの<p>や</p>のことを指し、前者は開始タグ、後者は終了タグと呼ばれます。
また、”p”自体のことをタグ名と呼び、開始タグには、タグ名の他に属性が含まれる場合があります。

コンテンツ（内容）とは

コンテンツとは、開始タグと終了タグに囲まれた部分のことを指します。
上記サンプルでいうと、あいうえおABCDEの部分です。

要素とは

要素とは、開始タグ、コンテンツ、終了タグのまとまりを指します。
つまり、上記のサンプル部分すべてを指します。

親要素,子要素,子孫要素について

要素はネストすることにより、階層構造（ツリー構造）を作ることが出来きます。
以下のサンプルを使って端的に整理してみます。
<!– サンプル –>

上のサンプルHTMLのコードは以下です。

このHTMLは<ul>要素、<li>要素、<a>要素の３つで成り立っています。

<ul>要素から見ると、<li>要素は子要素で、<a>要素は孫要素（子孫要素）です。

<li>要素から見ると、<ul>要素は親要素で、<a>要素は子要素です。

<a>要素から見ると、<li>要素は親要素で、<ul>要素は祖先要素です。

また、<ul>要素内にある３つの<li>要素は同階層に位置するため、兄弟要素と呼びます。