頭脳一式

人の記憶なんて曖昧なもの。すべての情報を頭に記憶するなんてナンセンス。困ったらここに来ればいいじゃん?というスタンスで最強のナレッジベースを目指すブログ

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

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

HTMLを勉強していると要素やタグの意味が段々と分からなくなってくる。
以下のサンプルを使って要素とタグの違いについて整理してみる。

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

タグとは

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

コンテンツ(内容)とは

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

要素とは

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

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

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

  • これがGoogleのリンク先です。
  • これがYahooのリンク先です。
  • これがAmazonのリンク先です。

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

<ul>
<li>これが<a href="https://www.google.co.jp/">Google</a>のリンク先です。</li>
<li>これが<a href="https://www.yahoo.co.jp/">Yahoo</a>のリンク先です。</li>
<li>これが<a href="https://www.amazon.co.jp/">Amazon</a>のリンク先です。</li>
</ul>

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

<ul>要素から見ると、<li>要素は子要素で、<a>要素は孫要素(子孫要素)となる。

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

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

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