[コーディングの基礎] 「内側・外側」「親要素・子要素」「囲う」という言葉の意味

htmlタグには「開始タグ」と「終了タグ」がありますが、今後解説の中で頻繁に「内側・外側」や「親要素(親)・子要素(子)」や「囲う」という用語が出てきます。
例えば「〇〇タグの内側に入れましょう」だとか「〇〇タグを△△タグで囲いましょう」、
「〇〇タグの親要素の△△タグに・・・」「△△タグの子要素の〇〇タグへ・・・」といった感じです。

今回はより理解が深まるように、divタグとpタグを使った以下のコードを例に取り解説します。

divタグとpタグの関係性に注目!

<div>
  <p>こんにちわ</p>
</div>

1行目にdivタグの開始タグ、3行目にdivタグの終了タグがあり、2行目にpタグがあります。
親要素・子要素・内側・外側の概念は、どのhtmlタグの立場から見たものかを考えるとわかりやすいはずです。
早速解説します。

内側・外側・親要素・子要素

内側

内側とは、htmlタグの開始タグと終了タグの間のことを意味します。
上の例のようにdivタグの開始タグ(1行目)と終了タグ(3行目)の間(2行目)に記述する場合、
divタグから見ると「内側に記述する」または「中に記述する」という言い方をします。

またdivタグはpタグを囲っているため、pタグの親要素ということになります。
また2行目のpタグを指す場合は「divタグの内側のpタグ」という言い方をします。

外側

逆に外側とは、pタグから見たdivタグということになります。
pタグから見ると「外側(外) = divタグの内側」ということになります。

親要素・子要素

htmlタグ同士に親子関係が成り立つ場合には「内側・外側」よりもわかりやすく「親要素・子要素」と区別することがあります。
例えば今回の場合、「pタグの親要素のdivタグ」「divタグの子要素のpタグ」という説明が適切ですが、
こうやってそれぞれのhtmlタグの立場から考えるととてもわかりやすいですね。

囲う

「囲う」とはhtmlタグの外側にさらにhtmlタグを記述した状態で、別の言い方で表すと「マークアップ」ということになります。

html

  <p>こんにちわ</p>

上のコードで「pタグをdivタグで囲ってください」という言い方をしたら・・・

html

<div>
  <p>こんにちわ</p>
</div>

こんな風に、pタグの外側にdivタグを記述しましょう。

また、「こんにちわ」をpタグでマークアップしてください、という言い方をしたら・・・

html

こんにちわ
<!-- 〜↓<p></p>タグでマークアップ〜 -->
<p>こんにちわ</p>

こんな風に「こんにちわ」をpタグで囲えばいい、ということです。