Web勉強中の初心者です。pタグとdivタグの区別

質問

こんにちは。
web勉強を初めて３ヶ月の初心者です。

よく、コーディングしていて、imgタグを入れる際に、pタグを使うべきかdivタグを使うべきか迷ってしまいます。
最初は、わけもわからずdivで括ればいいのだと思っていましたが、そうでもないと気づき始めて、改めて本やネットで調べたらpタグは「段落」、divタグは「まとまり」となっていました。自分としては、ある程度のグループとして入れる場合はdivで囲んで、ある程度の量がある文章ではpタグという認識です。
ただ、そうすると画像を１枚入れたりとか、少しの文章と背景だけを入れたいときは、divではないだろうから、pタグなのかな？とか、それともタグを入れずに、前後のdiv間に、文章やimgだけで入れるべきなのかな？と考えていくと正直混乱してしまいます。
もしくは、そういう場合は前後のdivも含めた自分のグループの分け方自体が、おかしいのかもしれません。
わかりにくい文章ですいません。
いいアドバイスありましたら、よろしくお願いします。

回答No.2

noname#196973 · ベストアンサー

基本的にインライン要素であるimgタグなどはブロックレベル要素で囲むのは基本です。
そこでよくpタグにすべきかdivタグにすべきか悩みますよね。

でもここで注目すべきはdivタグの特徴です。
divタグはブロックレベル要素をグループ分けするものなので、その中にインライン要素が一つだけ入っているというのはあまりよろしくありません。

まぁimgタグはpタグやdivタグで囲まなくても役割はちゃんと果たしてくれるし、pタグ・divタグどちらで囲んでも表示が変わって見えないなどあるため悩むところですが、基本pで囲むものと覚えて間違っていないですよ。
検定などでもpで囲むことで正解になります。

実際複数入れる時もpタグで囲み、CSSで回り込みや改行を隙間を空けないような設定をします。
divタグはページの全体やヘッダー・フッター・メニュー部分などグループ分けしたりするのに設定してます。

お礼

わかりやすい文章でありがとうございます。

おかげさまで、インライン要素やブロック要素を改めて勉強し直すきっかけにもなりました。
感謝です！

回答No.1

jsktok

参考URLに説明が書いてありましたので貼らせてもらいます。

参考URL：

http://www.eonet.ne.jp/~nga/html/div&p.html

お礼

ありがとうございます。
ひと通り、教えてくださったサイトを拝見しました。
もっと、勉強しなくては！と考えさせられました。