htmlの要素pとdivの違い

今さらですが、pとdivの違いについてです。
これまでの金子の認識。

p
・<p>と</p>の上下に一行空く（初期設定で）
・文章を囲む要素

div
・<div>と</div>一行空かない（初期設定で）
・意味を持たない

が、しかし。
この認識は間違っている。pは文章タグではないよ。と指摘を受けました。
てことで、ちょっと調べてみました。

p要素
・意味：Paragraph（段落）
※改行ではありません。改行はbrを使います。
・pタグはインライン要素のみ入れ子にできる。
考えたら、段落の中に段落ってへんですもんね。

div要素
・意味：なし
ただのブロック要素。
divの中にはブロック要素もインライン要素も入れ子にしてOKです。
※spanも意味をもちませんが、インライン要素です。

という感じ。
なのでpは文章タグではなく、段落タグです。
この勘違いってHTMLを正しく組もう！って時にかなりの弊害。

たとえば、この前金子は
imgタグをpタグで囲みませんでした。
文章を含まない画像なのにで、文章タグで囲ったら意味が変になる！って思ったんですね。
しかし、imgは段落だったのでpで囲わなきゃダメなのです。

それから、タグの前後に一行空く、空かない。って認識もよくないみたい。
だって前後に一行開けたいからpを使う～。てことになりかねないので。
段落だったらpを使うし、意味のないブロックだったらdivです。
表示を制御するならCSSです。

HTMLはちゃんと意味を理解しないとだめですね

コメントする