HTML5

on Note

p要素 段落を示す

p要素は文章の中で段落を示します。paragraph(「段落」の意味)の頭文字の pです。

長い文章があってそれを段落に分けたい時、それぞれ分ける部分を pタグで囲むことで、それらは段落として扱われます。

ここでは、p要素の概要や、Pタグによってどう表示されるのかを説明します。

p要素の概要

HTML5での分類
フロー・コンテンツ
書式
<p>段落単位の文章</p>
指定できる属性
グローバル属性
子要素にできるもの
フレージング・コンテンツ

p要素は文章を段落で区切る際に使用します。文章は、読みやすくする為に段落で区切りますが、1つの段落に対して1対の pタグで囲みます。

p要素の使用例

文章の中で、pタグで囲んだ部分が段落となります。

次のような文章があるとします。

<p>あいうえおかきくけこ。</p>

「あいうえおかきくけこ。」という1文を pタグで囲んで1つの段落としています。この場合次のように表示されます。

あいうえおかきくけこ。

これを、「あいうえお。」と「かきくけこ。」という2つの段落に分ける時は、それぞれを pタグで囲みます。

<p>あいうえお。</p>
<p>かきくけこ。</p>

このようにマークアップすることで、2つの段落に分かれて表示されます。

あいうえお。
かきくけこ。

pタグは、以前で言うブロックレベルの挙動をします。pタグで囲んだ部分は1つのブロックとして、表示領域を横幅いっぱいにとります。

よって、pタグで囲んだ文章は、前後に改行が入ったようなレイアウトとなり、段落として表示されます。

まとめ

p要素は、文章の段落を示す為に用います。ブログでは必ず文章を書きます。ということは同時に段落もできるので、p要素は最も使う要素と言えるでしょう。

段落としたいひとまとまりを pタグで囲みます。

pタグはブロックレベルの挙動をしますので、中のコンテンツは改行された状態で表示されます。