2013年10月6日日曜日

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

知らなかった新事実
pタグの中には、インライン要素しか置けません。

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


OGP のdescriptionや Google+の投稿などは、最初の<p>を基準にしているようなので、見出しに見せたい部分を<p>で囲ったりしていました。
書くときに「こういう書き方はいいのかな?」と一瞬思いましたが、ちゃんと表示されていました。(基本的に思い通りに表示できた時点で思考停止)

Facebook のdescriptionが途中で切れているのを少し気にしつつ、たまたま、オンラインで文法チェックしたところ、いかんと書いてあり初めて気がつきました。
しかも、もう少し調べてみると、</p>(終了タグ)は省略しても表示上は問題ないということです。(正式にはもちろんダメ)

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

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

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

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

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

…いいぢゃん。ちゃんと表示されてるし…。(ボソッ)