divとpの使いわけ

質問

サイトを作っているとdivとpで迷います。
「自由だしどちらでもいんじゃない？」と言う声も聞こえてきそうに
思うのですがこういう方向で使い分けている等という区分ってありますか？

私の場合

<div class="title">タイトルです</div>
<p>コメントです1</p>
<p>コメントです2</p>
<p>コメントです3</p>

のような感じでcssで

p {margin-bottom: 1em;}

と設定しております。

コメントに改行がなく1行2行で済む場合は

<div>コメントです</div>

で問題ないのですができるだけ適した改行(段落)も入れたくpでテキストは
囲むようにしております。

気になったもので質問させて頂きました。有利な点や不利な点など
どんなコメントでも構いませんのでご意見をお待ちしております。

回答No.2

abril · ベストアンサー

> サイトを作っているとdivとpで迷います。
> 「自由だしどちらでもいんじゃない？」と言う声も聞こえてきそうに

決して「自由」ではないですよ。divもpもブロック要素ではありますが、divは子要素にブロック要素を持てますが、pはインライン要素しか内包できない、という先ずは大きな違い（文法上の制約）があります。論理的意味を考えないなら、文法上はpを全てdivで置き換えることは可能ですが、その反対は真ではない、という事になります。
また、上記で触れた様に、（ご存知かもしれませんが）p（paragraph）には「段落」という論理的意味がありますが、div（division）自身は論理的意味は持ちません。ですので、内容が「段落」として相応しいものであるなら、pでマークアップするのが適切という事になります。
----------------------------------------------------------------------
<div class="title">タイトルです</div>
<p>コメントです1</p>
<p>コメントです2</p>
<p>コメントです3</p>
----------------------------------------------------------------------
上記の様な文章構造であるなら、ANo.1様の例と同様、「タイトルです」という箇所はh(n)要素でマークアップするのが妥当です。
----------------------------------------------------------------------
<h1 class="title">タイトルです</h1>
<p>コメントです1</p>
<p>コメントです2</p>
<p>コメントです3</p>
----------------------------------------------------------------------
ですが、上記の「コメントです1」～「コメントです3」までの3つのpに対して更に何かをまとめたスタイルを追加したいとします。例えば、この3つのpをひとくくりにして、外枠に線を引いたボックスに入れたレイアウトにしたいとします。その場合、ブロック要素であるpを子要素にできるブロック要素は限られます。例えば各リスト要素（ulのli、olのli、dlのdd）などもブロック要素を子要素に持てるのですが、まず親であるこれら自身に「リスト」という論理的意味がある為、どの局面でも適当に使えるというものではありません。となると、この場合妥当な親要素はdiv、という様に考えられます：
----------------------------------------------------------------------
<h1 class="title">タイトルです</h1>
<div class="coment">
<p>コメントです1</p>
<p>コメントです2</p>
<p>コメントです3</p>
</div>
----------------------------------------------------------------------
という様にマークアップした上で、div.commentにborderなどのプロパティでスタイルを与えれば論理構造上も問題がない状態で新たなスタイルを与える事ができます。

> コメントに改行がなく1行2行で済む場合は
> <div>コメントです</div>
> で問題ないのですができるだけ適した改行(段落)も入れたくpでテキストは
> 囲むようにしております。

改行があろうがなかろうが、「コメント」という同じ位置付けを持つものであれば、基本、pでマークアップすべき様に思えますが？

> 有利な点や不利な点など

divとpの使い分けができていない（文法上は正しい上で）からといって特に有利・不利があるかどうかわかりかねますが、pには明確な論理的意味があり、divには論理的意味がない、という事を押さえた上でマークアップを考えていけば、自ずとそれらの出番は決まってくると思うのですが。
個人的には、レイアウトを実現する為にdivを使うべきかどうかで悩む事はあっても、その内容がpかdivか、で悩む事はなかった様に思います。

お礼

お返事りがとうございます。
詳しいご説明を頂き理解を深める事ができ自信が持てました。
>改行があろうがなかろうが、「コメント」という同じ位置付けを持つものであれば、基本、pでマークアップすべき様に思えますが？

確かに論理的に考えるとおっしゃる通りですね^^;
まとめてスタイルを設定するにはpをdivでくくりそれ以外のコメントは
<p>でくくって行く方向で進めて行きたいと思います。

ご丁寧に教えて頂きましてありがとうございました！

回答No.3

noname#83425

回答ではなく、と言って皮肉を言うつもりもないのですが、
何でもdivで解決しようとすることを「div病」と言うそうです。
※お礼・返信不要です

回答No.1

noname#83877

普通に文章をマークアップするときにはpタグ、タイトルは見出しならh1～h6タグです。
divをhtmlだけで使う時は属性を指定して使います。

<div lang="en">
<h2>Title</h2>
<p>Comment</p>
<p>Comment</p>
<p>Comment</p>
</div>

また、その何も意味がないタグという特性を利用してcssやjavascript等のために記述されることがあります。

一応グループ化という使われ方も主張があるのですが作り手の都合上のグループ化なので、htmlの定義の曖昧さやhrタグの存在などから考えるとおかしいような気がします・・・

お礼

お返事ありがとうございます。
h1～h3までは割と使うのですがそれ以降はなかなか使用する事がないのが
現状ですね^^;それでdivでタイトルくくるという癖がついてしまいました。

やはり見出しとなるタイトルの場合はhタグを使うのが基本なのですね！
これを期に見直しして行きたいと思います。ありがとうございました！