<p>タグの中に<p>タグを入れてはいけない

知らなかった新事実

<p> の中に <p> や <div> (ブロック要素)を入れると、最初の p タグは解除されるらしいのです。

OGP の description や Google+ の投稿などは、最初の <p> を基準にしているようなので、見出しに見せたい部分を <p> で囲ったりしていました。

「こういう書き方はいいのかな？」と一瞬思いましたが、ちゃんと表示されていました。（基本的に思い通りに表示できた時点で思考停止）

Facebook のスニペットが途中で切れているのを少し気にしつつ、たまたまオンラインで文法チェックしたところ、いかんと書いてあり初めて気がつきました。

しかも、もう少し調べてみると、</p>（終了タグ）は省略しても表示上は問題ないということです。(個人的には非推奨)

上のソースをブラウザで確認すると、次のようにタグが補完されていました。

<p>
pタグの中には、インライン要素しか置けません。
</p>
<p>なんだって～～～！</p>
知らなかった。
<p></p>

最初の<p>は、終了タグの前に<p>(ブロック要素)が出てきたので、その直前で閉じていると判断されました。
最後の</p>は、開始タグがないのでそのまま閉じられています。

Blogger 以外のローカルのファイルでも補完されるのでブラウザの機能。Firefox、Ironとも同様でした。

あと、<Hx> (見出し)にも、ブロック要素は入れてはいけないそうです。
今まで、めちゃくちゃ使ってた。

…いいぢゃん。ちゃんと表示されてるし…。(ﾎﾞｿｯ)