HTMLの入れ子ルールについて

はじめまして、実習生のKです。
職業訓練校に通い、Webデザインにていて学び始めて3ヶ月経ちました。
初心者からのスタートで、まだまだ勉強中で苦労することは未だにありますが、
職業訓練校を通してWebデザインの楽しさを知ることができました。
今回は、私の経験が誰かの助けになれたら嬉しいなと思い、こちらの記事を書かせていただきました。

目次

はじめに

みなさんはHTMLの入れ子について、ルールがあるのはご存知でしょうか。
私はこのHTMLの入れ子のルールを理解しておらず(そもそも知らなかった)、
修正が大変なことになった経験があります。
今回この経験をもとに入れ子のルールについて書いていきます。

入れ子のルールを知った経緯

職業訓練校では実際に、クライアントから依頼を受けてサイトを作るグループ活動があり、
1ヶ月かけてデザインカンプの作成からサイトをコーディングする実制作がありました。
はじめての実制作、手探りの状態の中みんなでなんとかサイトの形にしていきます。

サーバーアップまで残すはコーディングの確認のみ。というところまでいったのですが、
検証サイトを使ってHTMLを確認してみるとエラーが大量発生。
入れ子に関するエラーで埋め尽くされ、
私はここではじめて、入れ子にルールがあったことを知ります。

実際の確認作業とエラー画面

確認作業の説明とともに実際のエラー画面を載せていきます。

サイトのメンテナンスや修正など、
他の人の手に渡ったときにも管理がしやすいように正しいコーディングをすることは大切です。
このためにも、検証ツールを使ってコーディングの確認をすることは
重要な作業ですので必ず行いましょう。

フォルダをサーバーにアップする前にコーディングが正確なものか、検証ツールを使って確認していきます。
今回はHTMLのマークアップの確認をするので、
W3CのMarkup Validation Service
( https://validator.w3.org/ )
という検証サイトを利用して確認します。

W3C検証サイトトップ画面

サイトはこんな感じです。

検証入力画面

HTMLを直接入力して検証しました。

検証結果画面
エラーメッセージ

検証結果がこちら。英語がたくさん出てきました。どうやらエラーメッセージのようです。

「英語ばっかりで読めない!」「英語がぎっしりで読みたくない!」
「こんなの読めない!無理だ!」と思われる方もいるかもしれませんが、
まずは一旦落ち着いて下さい。
翻訳ツールを使えば解読は簡単です。
Google翻訳やDeepL翻訳などの高性能な翻訳ツールが世の中にはあります。
正しいコーディングをする為には大切な作業ですので、
使えるツールはどんどん使って、HTMLの修正につなげましょう。

検証結果画面
エラーメッセージ

さて、こちらのエラーをざっくり説明すると、
ulタグの中にdivタグを入れてはいけません
ulタグの子要素はliタグか、スクリプトサポート要素しか使えません
dlタグの子要素としてならdivタグを使うことはできますよ」といったことが書かれています。

私としては当時、「なんでダメなんだろう?」としか思っていなかったのですが、
調べてみると入れ子の組み合わせについてルールがあったようです。

では、入れ子のルールとは一体どんなものなのでしょうか。

入れ子について

入れ子とは?

入れ子のルールについて説明に入る前に、
まずは入れ子そのものについて簡単に説明させていただきます。

「そもそも入れ子って何?」と思われる方もいるかもしれません。
ネスト(nest)とも呼ばれる入れ子ですが、
こちらを一言で表すと、
タグをタグで囲う構造】を指します。
マトリョーシカを想像してもらうと分かりやすいかもしれません。

マトリョーシカの画像

大きい人形のなかに中くらいの人形、そしてそのなかに小さな人形が入っていてさらに…
といったロシアの民芸品ですね。
HTMLの入れ子も同じです。
それでは実際にコードを見ていきましょう。

入れ子の例

例1

入れ子の例画像1
<div>
 <p></p>
</div>
マトリョーシカの画像
ペア

こちらの画像では、
divタグがpタグを子要素として囲う入れ子の構造になっています。

例2

入れ子の例画像2
<div>
 <div>
  <h2></h2>
  <p></p>
 </div>
 <ul>
  <li></li>
  <li></li>
  <li></li>
 </ul>
</div>

少し複雑に見えるので色分けしてみます。

入れ子の例画像2
書き込み画像
<div>
 <div>
  <h2></h2>
  <p></p>
 </div>
 <ul>
  <li></li>
  <li></li>
  <li></li>
 </ul>
</div>

こちらの画像では、
divタグ①divタグ②ulタグ③の入れ子2つを子要素として囲っています。
divタグ②h2タグとpタグを子要素として囲って入れ子に、
ulタグ③liタグを子要素として囲い、入れ子になっています。

いかがでしょうか、この構造が入れ子です。

入れ子のルール

それではこの入れ子のルールについて、本題に入っていこうと思います。

入れ子をする上での注意点として、タグには、

タグ自身が親要素となり、子要素として持つ事ができるタグ
タグ自身が子要素として含まれることができる親要素のタグ

この2種類がそれぞれのタグによって決まっています。
決まっていますと言われても、
「結局なにが良くてなにがダメなの?」と思ってしまいますよね。私もそう思います。

では、どのように確認すればいいのでしょうか。
結論は至って簡単です。

ツールを使いましょう。

入れ子チートシート

今回はツールサイトを紹介いたします。
吉川ウェブさんの
HTML5入れ子チートシート
( https://yoshikawaweb.com/element/ )です。
このチートシートを使えば、
入れ子で使える組み合わせがひと目で分かります。

チートシートトップ画面

使い方はとても簡単です。

チートシート操作画面

各要素名にカーソルを合わせると親と子の表示が出てきます。
選択したタグの親要素になれるタグを確認したければ親を、
選択したタグの子要素になれるタグを確認したければ子をクリックします。

チートシート結果画面
親要素の表示

親要素になれるタグは水色

チートシート結果画面
子要素の表示

子要素になれるタグは黄色

このように、

選択したタグ自身が子要素として含まれることができる親要素
選択したタグの子要素として入れ子にできる要素

こちらをひと目で分かるように表示してくれます。

では私が実際にエラーを出してしまったulタグについて、確認してみましょう。

チートシート結果画面
ulタグの子要素の表示

いかがでしょうか。ひと目ですぐにわかりますね。
ulタグの子要素として入れ子にできる要素は
li・script・templateタグのみです。

黄色で表示されなかったdivタグを使用したことが今回のマークアップのミスであり、
エラーメッセージが出た原因でした。

ではdivタグは一体どんなタグの子要素であれば入れ子として含まれることができるのか、
何のタグがdivタグを囲う親要素となれるのか、確認してみましょう。

チートシート結果画面
divタグの親要素の表示

たくさん表示されました。
水色で表示されているタグがdivタグを囲う親要素として使えるタグです。
選択したdivタグ自身も水色になっています。つまり、divタグをdivタグで囲うことはもちろん可能です。

以上が入れ子のルールとなります。

それではまとめに入ります。

まとめ

入れ子とは

ネスト(nest)とも呼びます。
タグをタグで囲う構造のことを指し、マトリョーシカのようなものです。

入れ子のルール・注意点

タグには
タグ自身が親要素となり、子要素として持つ事ができるタグ
タグ自身が子要素として含まれることができる親要素のタグ
この2種類がそれぞれのタグによって決まっています。

入れ子のルールを守るために

検索したりツールを使って確認しましょう。
ここでは
吉川ウェブさんの
HTML5入れ子チートシート
( https://yoshikawaweb.com/element/ )を紹介しています。

わからないまま、不安なまま作業を進めてしまうと大きなミスに繋がる可能性があります。
修正も大変になりますし、防げるミスは確実に減らしていったほうが良いでしょう

コーディングの確認

ツールを使って確認しましょう。
ここではHTMLのマークアップ確認には、
W3CMarkup Validation Service
( https://validator.w3.org/ )を紹介しています。
CSSのコーディング確認はこちらです。
W3CCSS Validation Service
( https://jigsaw.w3.org/css-validator/ )

サイトのメンテナンスや修正など、
他の人の手に渡ったときにも管理がしやすいように正しいコーディングをすることは大切です。
そのためにも、
検証ツールを使ってコーディングを確認することは重要な作業になります。
必ず行いましょう。

おわりに

いかがでしたか?
入れ子について理解は深まりましたでしょうか。
とても分かりやすいチートシートなので皆さまぜひ活用してください。
とにかく、困ったときは検索とツールを使いまくって乗り越えましょう。

最後までお読みいただきまして、ありがとうございました。

Advertising

Photoshop以外も契約したいけど、高くて躊躇していませんか?
Adobe Creative Cloudを一番安く購入する方法 →1年:39,980円の詳細を見る


世界最大級のオンライン学習サイトUdemy  ※UdemyはよくSALEをしていますので、ひんぱんにチェックして、Webデザイン講座の動画をお得にGETしてくださいね♡2000〜3000円くらいで買えることも。


ロイヤリティフリーの写真素材【PIXTA】 ※画像素材は定額制プランのあるサイトを選ぶのがオススメです。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる