HTMLで文章を書くとき、p と div のどちらで囲むか迷うことがあります。どちらもブラウザでは上から下に積み重なるように表示されるので、見た目だけでは違いが分かりにくいところです。
ひとことでいうと、違いは「意味があるかどうか」です。
| タグ | 名前の由来 | 意味 |
|---|---|---|
p | paragraph（段落） | 「ここは文章の段落です」という意味がある |
div | division（区分） | 意味はない。まとめて囲むための箱 |
p：文章の段落に使う
ブログの本文のような、文章のひとまとまりを囲みます。
<p>HTMLの基本を学ぶことで、誰でも簡単にブログ記事を読みやすく装飾できるようになります。</p>
<p>まずはよく使うタグから順番に覚えていきましょう。</p>
段落を分けるときは、p を分けます。段落の中で改行だけしたいときは br を使います（「hrタグとbrタグの使い分け」）。
pの中には入れられないものがある
p の中には、文章と、文章の一部を囲むタグ（a、strong、span、img など）しか入れられません。div、ul、見出し（h2 など）、別の p など、大きな塊を作るタグは入れられません。
入れてしまうと、ブラウザはそこで p を勝手に閉じてしまいます。
<!-- 書いたつもりのもの -->
<p>説明文<div>小さな枠</div></p>
<!-- ブラウザはこう読む -->
<p>説明文</p>
<div>小さな枠</div>
<p></p>div が p の外に出て、最後の </p> から空の段落ができてしまいます。CSSが思ったとおりに当たらないときは、こういう入れ子になっていないかを、ブラウザの「検証」画面で確かめると原因が分かることがあります。
div：まとめて囲むための箱
背景色や枠線を付けたいときなど、いくつかの要素をまとめてCSSを当てたいときに使います。
<div class="notice-box">
<h2>※注意点</h2>
<p>HTMLタグは、必ず開始タグと終了タグをセットで使いましょう。</p>
</div>
見出しと段落を丸ごと囲んで、notice-box という名前（class）を付けています。CSSでこの名前に枠線や背景色を指定すれば、中身ごと目立たせられます。div 自体には意味がないので、中には見出しや段落、画像など、何でも入れられます。
divを使う前に、意味のあるタグがないか考える
HTMLには、意味のある囲みのタグもあります。当てはまるものがあれば、そちらを使います。
| タグ | 使う場所 |
|---|---|
header、footer | ページや記事の頭とおしり |
nav | メニューなど、主なリンクのまとまり |
main | ページの主な内容 |
article | 記事のように、それだけでまとまった内容 |
section | 見出しが付くひとまとまりの章 |
aside | 本文とは別の補足（サイドバーなど） |
どれにも当てはまらず、見た目のためだけに囲むときが div の出番です。詳しくは「ページの正しい区切り方とセマンティックな構造化」で紹介しています。また、文章の中の一部だけを囲んで色を変えたいときは、div ではなく span を使います。
迷ったときの選び方
| 囲む中身 | 使うタグ |
|---|---|
| 文章の段落 | p |
| 文章の中の一部（色を変えたい単語など） | span |
| 見出し付きの章、記事、メニューなど | section、article、nav など |
| 見た目のためにまとめたいだけの塊 | div |
pを使う理由
すべてを div で囲んでも、画面の見た目はほとんど変わりませんし、Googleは div の中の文章も読めます。それでも段落に p を使うのは、次のような理由からです。
- 画面読み上げソフトやリーダー表示で、段落として扱われる：
段落ごとに読み進めたり、本文だけを取り出して表示したりするときに使われます - あとで読んだときに分かりやすい：
タグを見れば、そこが文章なのか、見た目のための箱なのかが分かります - 段落としての初期の余白が付く：
ブラウザはpの上下に余白を付けるので、CSSを書かなくても段落が分かれて見えます
WordPressでは
WordPressのブロックエディタでは、「段落」ブロックが p、「グループ」ブロックが div になります。文章は段落ブロックで書き、いくつかのブロックをまとめて背景色を付けたいときにグループブロックを使う、と考えると、HTMLの使い分けとそのまま対応します。
HTML全体の基本は「HTMLの基本｜タグの書き方とよく使う5つのタグ」で紹介しています。
まとめ
pは「段落」という意味がある。divは意味のない、まとめるための箱pの中にdivやulなどは入れられない。入れるとブラウザが勝手にpを閉じるdivを使う前に、section・article・navなど意味のあるタグが合わないか考える- 文章の一部だけ囲むなら
span pを使うのは、読み上げソフトやリーダー表示で段落として扱われ、あとで読んでも分かりやすいから
コメント