【HTML】イラストで分かる!入れ子構造と親子関係

HTML, HTML5 / CSS3HTML&CSS入門, 初心者

こんにちわ!
サイバーブリッジweb担当のリクです(`・ω・´)

今回はHTMLの「入れ子構造」について、初心者コーダーさんにも分かりやすくイラストを使って解説していきますね。

そもそも「入れ子」とは?

「そもそも入れ子とはなんぞや?」と思ったあなた!安心してください!
身近なものに例えて簡単に言うとマトリョーシカです!

本来「入れ子」とは”同様の形状の大きさの異なる容器などを順に中に入れたもの”を指します。

イラストで分かる入れ子構造

入れ子構造を分かりやすく

さてさてさーて(メリオダス風)、入れ子がなんなのか分かったところで、HTMLでの入れ子構造について解説していきますね。

まず、こちらの画像をご覧ください・:*+.\(( °ω° ))/.:+

イラストで分かる入れ子構造

上記のイラストのように開始タグと終了タグで要素を囲うことを入れ子にすると言います。

他にもネスティングネストネストするなんて言い方もしますので、先輩が「しっかりネストしろや!」と怒っても(΄◉◞౪◟◉`)ぽかーんとしないように注意しましょう。

入れ子構造の注意点

入れ子はいくらでも囲っていいですが、注意しなければならないことがあります。
全て書くとすごい量の記事になってしまうので、今回は基本的な注意点のみご紹介します。

それは別の終了タグとクロスしてはいけないと言うことと、ルールを無視した入れ子にすることです。

別の終了タグとクロスさせちゃだめ、絶対!

入れ子構造の注意点①

上記のイラストのように別の終了タグがクロス(ズレている)と、コードの見た目も悪いですし、何よりブラウザでの表示が崩れてしまう場合もあります。

なので、開始タグと終了タグは直線でしっかり繋がるように記述しましょう。

ルールを無視した入れ子は禁止

HTMLで入れ子をする場合、囲っていいタグと囲ってはいけないタグがあります。

入れ子構造の注意②

<div>タグはほぼ全ての要素を囲うことができますが、<p>タグは<h1>〜<h6>までの見出し要素などを囲うことはできません。

親要素と子要素の関係を分かりすく

HTMLの入れ子要素には親要素と子要素という関係性があります。

上記のイラストのように、HTMLでは無制限に入れ子構造を作ることができ、これを多重構造と言います。
また、入れ子構造が重なることを「入れ子の階層が深い」などと表現することもあるので覚えておきましょう。

慣れないうちは「どの要素がどの親要素で、どの要素が子要素なのか?」分からなくなってしまうこともあると思いますが、書いていくうちに理解できると思うので安心してください。

まとめ

  • 要素を別のタグで囲うことを「入れ子」と呼ぶ
  • 入れ子にはルールがあり別の終了タグをクロスさせてはいけない
  • 囲っている要素を親要素、囲われている要素を子要素と呼ぶ
  • HTMLでは入れ子で多重構造を作ることができる

入れ子構造の基本的な意味や使い方は以上です。

入れ子のルールは後日改めてまとめますね・:*+.\(( °ω° ))/.:+

Posted by リク