HTMLを学び始めたときに必ず出てくる「要素」という言葉。実は「親要素・子要素・孫要素・ひ孫要素」という階層構造を理解することが、読みやすく正しいコードを書くための第一歩です。この記事では、HTML要素の基本から階層構造の仕組みまでを初心者向けにやさしく解説します。家族関係に例えながら学べるので、スッと理解できるはずです。
HTML要素とは？基本の考え方
要素の定義（開始タグ＋内容＋閉じタグ）
要素とは→【開始タグ＋内容＋閉じタグ】＝要素です
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
HTML要素がなぜ重要なのか
HTML要素（親要素・子要素・孫要素・ひ孫要素）を正しく理解することで、
- 読みやすい構造的なコードが書ける
- CSSやJavaScriptで操作しやすくなる
- 検索エンジン（SEO）にも有利になる
といったメリットがあります。
HTML要素の階層構造を理解しよう！
親要素とは？特徴と役割
親要素は、他の要素を囲む一番外側の要素です。
例えば、次の例では <div> が親要素です。
・このように、<div>要素の中に複数の要素がある場合には親子関係が生まれます。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
・ココでは、 <div> が親要素になります。親要素は１つしか存在しません。
子要素とは？複数持てるルール
・親要素の中にあるのが子要素です。ここでは子要素は１つですが、子要素は何個あっても良いです。
孫要素とは？さらに深い階層
・子要素の中にあるのが孫要素です。孫要素も何個あっても良いです。
ポイント
・親要素は１つしか存在しない
・他の要素を一番外側で囲んでいるのが親要素
・子要素は親要素の中にある
・孫要素は子要素のさらに中にある
親要素・子要素・孫要素はどれ？
・この場合<span>要素は ひ孫要素となります。
・では、この場合はどのようになるのでしょうか？
・この場合、このように、子要素が２つになります。なぜなら
・一番外側にあるのが親要素なのはわかると思います
「開始タグ＋内容＋閉じタグ＝要素」でしたよね。親要素の中にある要素は全て子要素になります。ややこしいかもしれませんが、何度も読み返してください。親要素の中にある子要素はこの２つだけになります。
まとめ
・要素の階層は、家族で考えるととても覚えやすい
・HTMLを書くときは、階層構造を意識すると読みやすくなる。
コメント