はじめに

こんにちわ、きりです。

１０代のときにレンタルサーバで個人サイトを作ったり、サークルのHPを作ったりとにわかWebエンジニアだった、わたくしですが。
今更ながら、HTMLやCSSについて勉強をし直しております。

今回は表題の通り、pタグ、spanタグ、divタグについて、整理していきます。

これまで
div・・・グループでまとめるもの
p,span・・・テキストを表示するときになんとなく利用するもの

というイメージで、いずれも、CSSでスタイルを当てるときに、タグが必要だから足してた感が否めません。

改めて調べてみると、（当然ながら）それぞれのタグには違いがあり、役割が異なることがわかりましたので、備忘録的な意味で記事を書くことにしました。

divタグ

divタグは、「division（段とか仕切りの意味）」のdivで、ページ内の塊を定義するものです。
divタグはhtml4においては、ブロック要素になります。ブロックタグは「一つのかたまりとして認識される要素」です。
※対して、インライン要素は「文章の一部として扱われる要素」です。

またはhtml5においては、「フロー・コンテント（子孫にテキストなどを持つもの）」です。
※「フレージング・コンテント（段落などの中に含まれる文節・語句など）」ではありません。

文章を修飾されるためのタグです。

spanタグはhtml4においては、インライン要素になります。インライン要素は「文章の一部として扱われる要素」です。
１０行程度の説明文章があった場合、文章内で重要な単語などを太字にしたり、赤字にしたりする場合、重要な単語をspanで括り装飾します。

また、html5においては「フロー・コンテンツ（子孫にテキストなどを持つもの）」かつ「フレージング・コンテンツ（段落などの中に含まれる文節・語句など）」になります。

pタグは「Paragraph（段落）」の頭文字です。
divタグはhtml4においては、ブロック要素になります。ブロックタグは「一つのかたまりとして認識される要素」です。

またはhtml5においては、「フロー・コンテント（子孫にテキストなどを持つもの）」です。

これまでの説明から分かる通り、spanとdiv,pタグは用途や役割が全く異なります。
文章の一部の修飾する場合はpタグを使えば良いということがわかりました。

問題はこちらです、html4とhtml5の定義からすればどちらも同じことがわかります。
そのため、２つの使い分けはタグ名の由来に立ち戻り判断します。

divタグ
「division（仕切り）」の「div」なので、ページ内にブロックを作りたい時に使用。

pタグ
「paragraph（段落）」の「p」なのでページ内で段落を作る際に使用。

もやっとしていたことがすっきりし、とても爽快な気分です。
これで、pタグ、spanタグ、divタグ利用時にどのタグを利用すればよいかに迷わずに済みそうです。