pタグの中にh1,h2などのタグを置いてはいけない

HTMLを学び始めた人がよくハマる罠。

<p>
  ...
  <h1>見出し</h1>
  ...
</p>

のような書き方をしてはいけないよというお話です。

---

<p> は段落(paragraph)を意味するタグで、<h1>,<h2>などは見出し(heading)を意味するタグです。
文章の構造が

見出しA
段落A
段落B
見出しB
段落C
段落D

というようになっていた場合、

<h1>見出しA</h1>
<p>段落A</p>
<p>段落B</p>
<h1>見出しB</h1>
<p>段落C</p>
<p>段落D</p>

のように囲うべきです。

<p>
  段落1
  <h1>見出し</h1>
  段落2
</p>

のような構造は不自然です。

またWebブラウザーもこの下のような文書構造は許可しておらず、このような書式を見つけるとブラウザーは自動的に</p>を見出しの前に補完します。つまり下記のようなHTMLとして扱われます。

<p>
  段落1
</p><!-- ←これがブラウザーにより自動的に補完される -->
  <h1>見出し</h1>
  段落2
</p> <!-- ←これは無意味なタグとして無視される -->

このようになると何が問題かというと、段落2の部分は<p>要素の子ではないということになるので、例えば

p {
  color: blue;
}

のようなスタイルが意図したとおりに適用されなくなります。
一見段落1と見出しと段落2が青くなるように見えますが、実際には段落1のみに適用されます。

知らないとハマることになるので、HTMLを学び始めた人は最初からきちんとした構造のHTMLを書くように気をつけましょう。