HTML pタグとdivタグの違いとは

pタグとdivタグの違いとは

「P」とは、段落を指定するためのタグで、「P」とは「Paragraph（パラグラフ）」の略です。
<p>～</p>で囲まれたテキストは1つの段落であることを示します。
HTMLにおける段落は、通常の文章と同じく文章のひとかたまりを表します。
同じく改行させるタグに<br>タグが存在しますが、これは文章中で改行する箇所に挿入されるタグであるため、
段落間で1行分改行させるために<br>タグを使用するのはあまり良くありません。
その場合はPタグを使いましょう。

以下例文を書いてみます。
【例1：<p>タグなし/<br>なし】

I am the bone of my sword.体は剣で出来ている。
Steel is my body, and fire is my blood.　血潮は鉄で　心は硝子。
I have created over a thousand blades.幾たびの戦場を越えて不敗。
Unknown to Death.ただの一度も敗走はなく、Nor known to Life.ただの一度も理解されない。
Have withstood pain to create many weapons.彼の者は常に独り　剣の丘で勝利に酔う。
Yet, those hands will never hold anything.故に、生涯に意味はなく。
So as I pray, unlimited blade works.その体は、きっと剣で出来ていた。

【例2：<p>タグあり/<br>タグあり】


I am the bone of my sword.
体は剣で出来ている。
Steel is my body, and fire is my blood.
血潮は鉄で　心は硝子。
　I have created over a thousand blades.
幾たびの戦場を越えて不敗。
　Unknown to Death.
ただの一度も敗走はなく、
Nor known to Life.
ただの一度も理解されない。
Have withstood pain to create many weapons.
彼の者は常に独り　剣の丘で勝利に酔う。
Yet, those hands will never hold anything.
故に、生涯に意味はなく。
So as I pray, unlimited blade works.
その体は、きっと剣で出来ていた。

この例文では、例１「<p>I am the bone of my sword.<br>体は剣で出来ている。</p>」部分にpタグとbrタグが挿入されています、
そのほかも同じ位置に挿入されています。
通常、HTMLではテキストである部分をこの<p>タグで囲います。使用頻度は高く、最も使われるHTMLタグの一つです。

divタグとは？

divタグは、ひとかたまりの範囲として定義する際に使用します。
divタグには特別な意味はありませんが、<div>～</div>で囲まれた範囲を一つのグループとしてまとめることができます。
divタグはスタイリング目的の場合や、class属性・id属性などの属性で複数の要素に同じ値をまとめて指定する場合には便利です。
以下の使用例文は、1つ1つの段落を<div>で囲ってCSSによるスタイリングをまとめて指定しています。

【使用例コード】

<div class="text250 textRed"><p>I am the bone of my sword.<br>
体は剣で出来ている。</p></div>
<div class="text200 textBlue"><p>Steel is my body, and fire is my blood.<br>
血潮は鉄で　心は硝子。</p></div>
<div class="text140 textRed"><p>I have created over a thousand blades.<br>
幾たびの戦場を越えて不敗。</p></div>
<div class="text130 textBlue"><p>Unknown to Death.<br>
ただの一度も敗走はなく、</p></div>
<div class="text120 textRed"><p>Nor known to Life.<br>
ただの一度も理解されない。</p></div>
<div class="text110 textCenter"><p>Have withstood pain to create many weapons.<br>
彼の者は常に独り　剣の丘で勝利に酔う。</p></div>
<div class="text90 textCenter"><p>Yet, those hands will never hold anything.M<br>
故に、生涯に意味はなく。</p></div>
<div class="text80 textCenter"><p>So as I pray, unlimited blade works.<br>
その体は、きっと剣で出来ていた。</p></div>

【使用後表示例】

I am the bone of my sword.
体は剣で出来ている。

Steel is my body, and fire is my blood.
血潮は鉄で　心は硝子。

I have created over a thousand blades.
幾たびの戦場を越えて不敗。

Unknown to Death.
ただの一度も敗走はなく、

Nor known to Life.
ただの一度も理解されない。

Have withstood pain to create many weapons.
彼の者は常に独り　剣の丘で勝利に酔う。

Yet, those hands will never hold anything.M
故に、生涯に意味はなく。

So as I pray, unlimited blade works.
その体は、きっと剣で出来ていた。

pタグとdivタグの違いとはについてでした

このようにdivタグを使うことで個別でテキストを大きくしたり、小さくしたり、色を変えることが可能になります。
他にもHTMLには多くのタグがあります。これからもHTMLについて記事を掲載していきます。