HTMLを書いていると、よく出てくる要素でp要素、div要素、span要素があります。使い方を調べてもinput要素やform要素のように明確な使い方がある訳ではなく、モヤモヤした経験があるのではないでしょうか。これらの要素は一定の範囲を指定するために使うのですが、最初は違いも分かりづらかったりしますので比較してみます。
p要素とは？
ひとつの段落であることを表す際に使用する要素です。特徴としては改行された後に1行空白が入ります。これは実際に試してみた方が分かり易いと思うので以下のようなHTMLを記述して確認しましょう。
<p style="color:red;">HTMLのP要素</p> <p style="color:green;">HTMLのP要素</p> <p style="color:blue;">HTMLのP要素</p>
そうするとこのように改行された上で空白行が入ってるのがわかります。
HTMLのP要素
HTMLのP要素
HTMLのP要素
補足
・HTML5に於いてはp要素のalign属性は廃止されました。揃え位置の指定にはCSSのtext-alignプロパティで指定します。
・p要素同士の間隔を調整するにはCSSのmarginプロパティを使用して下さい。
<p>: 段落要素 - HTML: HyperText Markup Language | MDN
div要素とは？
p要素と同じブロック要素で、特徴としては前後に改行が入ります。違いは空白行が入るかどうかという点です。こちらも実際に試してみましょう。
<div style="color:red;">HTMLのdiv要素</div> <div style="color:green;">HTMLのdiv要素</div> <div style="color:blue;">HTMLのdiv要素</div>
表示してみるとp要素と違って空白行がないことがわかります。
補足
・HTML5に於いてはdiv要素のalign属性は廃止されました。揃え位置の指定にはCSSのtext-alignプロパティで指定します。
・div要素はページレイアウトやスタイリングを指定する際に、CSSを適用するためのコンテナ要素として使用されることの多いタグですので、他に適切な要素がある場合はそちらを使用するようにします。
<div>: コンテンツ区分要素 - HTML: HyperText Markup Language | MDN
span要素とは？
インライン要素です。div要素とは似た役割を持っていますが、違いとしては改行が入らないことです。実際に試してみます。
<span style="color:red;">HTMLのspan要素</span> <span style="color:green;">HTMLのspan要素</span> <span style="color:blue;">HTMLのspan要素</span>
表示するとp要素やdiv要素のように改行されずに表示されているのがわかると思います。
HTMLのspan要素 HTMLのspan要素 HTMLのspan要素
このように改行はさせたくないけど、文書の途中で一部だけスタイルを変更したい場合とかに使えます。div要素やp要素の中にspan要素を使ったりする事が多いですね。
