要素って何？
HTMLをやっていると頻繁に出てくる単語、要素。いや、要素って何よ！？って感じですよね。わかります。要素というのは、<>(開始タグと呼ぶ)と、</>（終了タグと呼ぶ）で囲まれたコンテンツ（もの）をひとまとめにして要素です。<></>これに囲まれているものは全部要素ってことです。
空要素って？
じゃあ全部要素なのか？というと、中には空要素と言われるものも存在します。
それらは一体何なのかというと、例えば改行の機能を持つ<br>要素なんかは、終了タグを必要としません。なのでこれは空要素と呼ばれています。空要素の数はそう多くはありません。
とにかく、終了タグが無く１つの開始タグだけで完結してしまうのが空要素です（中身空っぽですからね）。まあ別に大事なことってわけでもないのでふーんくらいで聞き流しておいてください。
親要素と子要素とは
HTMLにおける親要素と子要素とは、プログラミングでもよく言われますが入れ子と呼ばれるものと同じです。例えるならばこんな感じ。
（これがこうなって（え？どうなって？）こうなっているよ。）
↑１つのコンテンツの中にまた１つのコンテンツが入っている。これが入れ子的なことです。
それをHTML的に表現したら、「ある要素の中にまた一つの要素が入っていて、別のタグを囲んでいるのが親要素で、囲まれているのが子要素」です。
例えば、このようなひとつの段落をHTMLを使って書き上げたいとします。↓
あきのかぜが ふいた
あなたはすこしほほえんで そして
「ちょっとおてあらい」
といった
この裏側はこうです。
<p>あきのかぜが ふいた<br>
あなたはすこしほほえんで そして<br>
「<strong>ちょっとおてあらい</strong>」<br>
といった</p><p>が段落の機能を持っていて、<br>は改行。<strong>は太字にする機能を持っています。
では、この場合親要素と子要素はなんでしょう？
そうですね、親要素が<p>で、子要素は<strong>ですね。なぜなら囲んでいるのが<p>で、囲まれているのが<strong>だからです。
え？<br>も囲まれてるって？んんん～、そうですね～。ただ、<br>は要素ではなく、中身を指定しないので空要素と呼ばれるものです。なのでこの場合<br>はガン無視でいいでしょう。
親要素と子要素のタブー
これはアウトです。
<p>きょうのテストは10<strong></p>0点だった</strong>
子要素は親要素からはみ出てはいけません。捕らわれた宇宙人のように真ん中に居てもらいましょう。
先祖要素と子孫要素
親要素もあれば、今度は先祖要素と子孫要素もあります。ここまでくるとちょっと笑えて来ますね。さて、それじゃあ先祖要素と子孫要素ってどんな関係だと思いますか？例を示しましょう。
<div>
<p>ふゆは さむい。とても さむい。<br>
<strong>さいふのなかみも なんならさむい。</strong><br>
おとしだまが まちどおしいね（御年４０歳）。</p>
</div>まず親子の関係を見てみましょう。親子関係であるのは<p>と<strong>です。
では、<strong>から見た<div>はどうなるでしょう？親の１つ上なので先祖になります。（おじいちゃんとおばあちゃんはもうお◎くなりになっている前提なんですね…。）
また逆に言うと、<div>から見た<strong>は子孫ということになります。残された希望…（ホープ）
兄弟要素
おーっとここにきてニューフェイスの登場だ！！今度は兄弟要素というものをご紹介しましょう！でもここまで読んでいるあなたにはもうお分かりのことでしょう。先に種を明かしておくと同じ親を持つ要素のことです。
<div>
<h1>１人目の兄弟。</h1><br>
<strong>２人目の兄弟。</strong><br>
</div>まず要素的には<div>、<h1>、<strong>の３つがあります。親となるのは<div>タグです。そして子となるのは<h1>、<strong>の２つです。何故かというとその両方が<div>に囲まれているから。
どっちが兄とかどうでもいいですけど強いて言うなら最初に出てるから<h1>がマリオでしょう。<strong>がルイージ。割とどうでもいい！！！
