p要素

HTMLでは、段落を示すことができます。

本ページでは、p要素について説明します。

p要素とは

pは、段落を示す要素です。p要素のコンテンツとして、テキストなどを記述することで段落になります。ブロックボックスで表示されるため、次の要素は改行して表示されます。

pの定義は、以下のとおりです。

【pの定義】
コンテンツカテゴリ フローコンテンツ認知可能コンテンツ
可能な親要素 フローコンテンツを包含できる要素
可能なコンテンツ フレージングコンテンツ
タグの省略 開始タグは必須。終了タグは条件を満たせば省略可能。
DOMインターフェース HTMLParagraphElement

終了タグを省略できる条件は、以下です。

  • 次の要素が、address、article、aside、blockquote、details、div、dl、fieldset、figcaption、figure、footer、form、h1、h2、h3、h4、h5、h6、header、hgroup、hr、main、menu、nav、ol、p、pre、section、table、ulの場合
  • 親要素内で次の要素がなく、親要素がa、audio、del、ins、map、noscript、video、自律カスタム要素でない場合

利用例

以下は、pを使ったHTMLの例です。

【pの利用例】
<p>これは、段落を示します。段落は、文書を記述して1つの段落の中では改行しません。次の要素が別のp要素のため、終了タグは省略可能です。</p>
<p>これは、次の段落を示します。次の段落は、改行して表示されます。複数の段落によって、記事が構成されます。</p>

これをブラウザで表示すると、以下になります。

ブラウザの画面で、2つの段落が表示されています。行間は普通で、字下げはされていません。

CSSを以下のように記述したとします。

【cssの記述例】
p {
  line-height: 180%;
  text-indent: 1em;
}

line-heightは、行の高さを指定します。180%にすると、行間が広がります。また、text-indentは行頭のインデント(字下げ)を指定します。1emと指定しているため、1文字分の字下げが行われます。

上記により、以下のように表示されます。

ブラウザの画面で、2つの段落が表示されています。行間は広がっていて、字下げもされています。

行間が少し広がり、字下げも行われています。

属性

グローバル属性が使えます。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
p
【スマートフォン】
項目 Sa An Op Ch Fx Sm
p
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

HTML要素(タグ)一覧」に戻る