なぜ「pタグ」の中に「div」を入れてはいけないの？HTMLの「入れ子」のルールを優しく解説します

こんにちは！Web制作の学習、順調に進んでいますか？
HTMLを書き始めると、タグのルールにぶつかって「あれ、これって合ってるのかな？」と不安になること、ありますよね。特に、文章を書くときに一番よく使う`

`タグ。実はこの子、「中に入れていいもの」と「ダメなもの」がかなりハッキリしている、ちょっとこだわり屋さんなんです。

今日は、そんな`

`タグのコンテンツモデルについて、専門用語を抜きにして、身近な例え話と一緒にひも解いていきましょう。

—

` `タグは「手紙の封筒」のようなもの

まず、`

`タグ（pはparagraphの略で「段落」という意味ですね）の役割をイメージしてみてください。これは「一通の手紙」だと考えてみましょう。

手紙の中には、文字や強調したい言葉、リンクなどが入りますよね。でも、手紙の中に「別の封筒（divやh1など）」がゴロッと入っていたらどうでしょう？ 郵便屋さんは困ってしまいますし、受け取った方も「えっ、何これ？」と驚いてしまいますよね。

HTMLの世界では、この「手紙の中に別の大きな箱（ブロックレベル要素）」を入れることを禁止しています。これが、`

`タグのコンテンツモデルの正体です。

` `タグの中に置けるのは「フレージングコンテンツ」だけ

専門用語が出てきましたが、難しく考える必要はありません。要するに、「文章の流れを邪魔しない、小さな部品」のことです。

• 入れてOKなもの（フレージングコンテンツ）：
• ``（リンク）
• ``（文字の色を変えるときなど）
• ``（太字）
• ``（画像）
• `
  `（改行）