初めてのHTML5 – (3) – HTMLの構造

HTMLタグの中に他のコンテンツを入れることで要素の間に階層関係ができます。

この関係を「ツリー構造」と言います。

この「ツリー構造」はcssを利用してHTMLのページを作る時に凄く重要になってきます。

今回はその「ツリー構造」で、その関係性を表す用語を調べて行きたいと思います。

親要素・子要素

要素でHTMLを作ったら必然的に要素の中に要素を書くことになります。

このとき囲む要素を「親要素」、囲まれる要素を「子要素」といいます。

HTML文で表すと以下のようになります。

<span>
　　<h2>このh2要素はspan要素に対してい子要素となります。</h2>
</span>

上記の場合「span」要素を「親要素」、「h2」要素を「子要素」と言います。

先祖要素・子孫要素

要素を重ねて使うと「親要素の親要素」、もしくは「親要素の親要素の親要素」などが生じます。

「親要素」以上の「親要素」をすべて「祖先要素」といいます。

逆に「祖先要素」に対して、「子要素の子要素」、もしくは「子要素の子要素の子要素」はすべて「子孫要素」といいます。

HTML文で表すと以下のようになります。

<div>
		<table>
				<tr>
						<td></td>
						<td></td>
				</tr>
				<tr>
						<td></td>
						<td></td>
				</tr>
		</table>
</div>

上記のような場合、「div」タグに対して「tr」タグ、「td」タグ要素はすべて「子孫要素」になります。

逆に「tr」タグ、「td」タグに対して「div」タグ要素は「祖先要素」となります。

兄弟要素

ある要素とある要素が同じ階層にあると、その要素たちを「兄弟要素」といいます。

その要素の中で先に出た要素を「兄要素」、後で出た要素を「弟要素」と呼んだりします。

HTML文で表すと以下のようになります。

<div>
		<ul>
				<li>兄弟要素（一番の兄）</li>
				<li>兄弟要素（上よりは弟だけど下よりは兄）</li>
				<li>兄弟要素（一番下の弟）</li>
		</ul>
</div>

上記の場合「li」タグたちを「兄弟要素」といいます。

それから上の「li」タグ要素を「兄要素」、そのタグ要素より下の要素を「弟要素」といいます。