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

言語切り替え

「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」タグ要素を「兄要素」、そのタグ要素より下の要素を「弟要素」といいます。

初めてのHTML

初めてのHTML5 - (1) - HTMLの要素と属性 ・・・今回はHTMLの属性と要素に対して詳しく扱ってみようと思います。
初めてのHTML5 - (2) - HTMLでWebページを作成する時の基本的なルール ・・・今回はHTMLの要素の属性を活用して簡単なWebページを作ってみました。 この記事まで見たらほとんどのWebページは把握できますので、興味のある方は是非参考にしてください。
初めてのHTML5 – (3) – HTMLの構造 ・・・「HTML構造」とその構造で使われる要素の用語に対して分かる。
初めてのHTML5 – (4) – URL ・・・URLの説明と各部位に対する説明をします。
初めてのHTML5 – (5) – 相対パス、絶対パス ・・・今回は絶対パスと相対パスを簡単な例を通してみてみたいと思います。
[Total: 0 Average: 0]

コメント

 
タイトルとURLをコピーしました