div・p・span・sectionの違いは？

クラウド事業部のたまです。

プログラミングから入った方が意外とつまづくHTML。
どこにでもなんとなくdivを使っている方もおられるのではないでしょうか。
先日、後輩から「この部分のHTML、divとpのどっちがいいですか？」という質問をされたので使い方について説明したのですが、改めてその違いについてまとめてみようと思います。

用途が似ているタグとして、divとp、span、sectionのどれを使うべきか迷うこともあるようなので、改めてそれぞれの違いを見て行きましょう。

div

divは分割を意味するdivisionに由来します。
フローコンテンツをまとめる役割があり、divそのものもフローコンテンツですが、div自体は意味を持ちません。
divはbody要素に入る全ての要素をまとめることができます。
用途としては、複数の要素をひとかたまりのグループとしてまとめ、idやclassで意味づけやcssでの装飾を行う範囲の指定に使われます。
ブロックレベル要素なので、前後に改行がはいりブラウザの横幅いっぱいを閉める要素となります。

p

pは段落を意味するparagraphの頭文字です。
その意味通り文章の段落を表し、文章を構成するテキストを示すフローコンテンツで、pの中には文章内のひとかたまりを入れます。
ブロックレベル要素なので前後に改行が入ります。

span

spanはフレージングコンテンツとして、フレーズをグループ化することができます。
div同様意味を持たないタグですが、インライン要素なので前後に改行は入りません。
文章の一部として装飾を付けたい場合に使用されます。
私は、会社名や商品名などの途中で改行させたくない単語をspanで囲い、cssにwhite-space: nowrapを利用し、画面幅に合わせて単語ごと段落を落としたい場合に使うことが多いです。

section

divのように要素を纏める役割としてsectionがあります。
divと同様にフローコンテンツでブロックレベル要素ですが、意味を持たないdivに対し、sectionは一つのテーマを範囲指定する目的で章や節といった意味を持つ範囲の指定で使用します。

ブロックレベル要素とインライン要素

ブロックレベル要素とインライン要素についても補足しておきましょう。
ブロックレベル要素はその名の通りかたまりで、要素の前後に改行がはいります。
インライン要素は要素の一部として改行なしに扱われます。
配置ルールとして、ブロックレベル要素の中にはブロックレベル要素もインライン要素も配置できますが、インライン要素の中にブロックレベル要素を配置することはできません。

今回の内容のまとめ

divは意味を持たないため便利に使えますが、章や節などの意味合いを持たせたい場合はsectionを使用しましょう。
特にテーマなどなく範囲を指定したい場合にはdivを使用します。
pは文章の段落を表すのに使用します。
spanは文章内のフレーズのグループ化に使用します。

今回はHTMLの基礎をご紹介しました。
タグの意味や用途を理解して、正しく読みやすいHTMLを書けるようにしましょう。