HTML <p>

開始タグ<p>と終了タグ</p> で囲んだ範囲をひとつの段落（Paragraph）とします。段落はブロック要素となり、前後に改行が入ります。

書式

<p>
  <!-- phrasing content -->
</p>

HTML では終了タグを省略することができます。 XHTML では省略できません。開始タグと終了タグの間にはインライン要素が任意回数表れます。

属性

p要素には次の属性を指定できる。

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
data-*
カスタムデータ属性を指定する。
dir
テキストが流れる方向を指定する。
id
HTML文書内で一意な識別子を指定する。要素に識別子を付けることにより、CSSのセレクタやJavaScriptでこの要素を特定できる。
lang
要素の言語を指定する。
lang属性
値 説明
ar アラビア語
de ドイツ語
en 英語
en-AU 英語（オーストラリア）
en-CA 英語（カナダ）
en-NZ 英語（ニュージーランド）
en-SG 英語（シンガポール）
en-UK 英語（イギリス）
en-US 英語（アメリカ）
es スペイン語
fr フランス語
fr-CA フランス語（カナダ）
fr-FR フランス語（フランス）
it イタリア語
ja 日本語
ja-JP 日本語（日本）
ko 韓国語
pt ポルトガル語
pt-BR ポルトガル語（ブラジル）
pt-PT ポルトガル語（ポルトガル）
ru ロシア語
th タイ語
th-TH タイ語（タイ）
tr トルコ語
vi ベトナム語
zh 中国語
zh-cmn-Hans 中国語・普通話・簡体字
zh-cmn-Hans-CN 中国語・普通話・簡体字（中国大陸）
zh-cmn-Hant 中国語・普通話・繁体字
zh-cmn-Hant-TW 中国語・普通話・繁体字（台湾）
zh-yue-Hant 中国語・広東語・繁体字
zh-yue-Hant-HK 中国語・広東語・繁体字（香港） 
<p lang="en-US">
  The quick brown fox jumps over the lazy dog.
</p>
ondblclick
要素がダブルクリックされたときに実行するJavaScriptを指定する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。
title
テキストの脚注や解説など、ツールチップに適した要素のアドバイザリ情報を指定する。

コンテンツ・モデル

p 要素の開始タグと終了タグの間には、フレージング・コンテンツを含めることができる。具体的には、以下に示す要素である。

サンプル

P 要素の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<p>最初の段落です。</p><p>次の段落です。</p>

最初の段落です。

次の段落です。

HTML では終了タグを省略することができるので、次のように記述することもできます。

<p>最初の段落です。<p>次の段落です。

JavaScript

JavaScriptからはHTMLParagraphElementインタフェースを通じてp要素へアクセスできる。

HTMLParagraphElementインタフェース
プロパティ 型 説明
childElementCount unsigned long 子要素の数（読取り専用）
classList DOMTokenList クラスのリスト（読取り専用）
clientHeight Number 要素の内部の高さ（読取り専用）/td>
clientWidth Number 要素の内部の幅（読取り専用）
dir DOMString p要素のdir属性
firstChild Node 最初の子要素（読取り専用）
id DOMString p要素のid属性
innerHTML DOMString 要素内容のマークアップ
innerText DOMString ノードに描画されるテキスト
lang DOMString p要素のlang属性
lastChild Node 最後の子要素（読取り専用）
nextSibling Node 次のノード（弟要素）（読取り専用）
style CSSStyleDeclaration p要素のstyle属性
title DOMString p要素のtitle属性 
var text = document.getElementById('example').innterText;

HTMLタグ

CSS

border-right
右の境界線の太さ、種類、色を指定するCSSプロパティ 
<p style="border-right: medium solid gray">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

参考文献

WHATWG (2021) "Grouping content" HTML Living Standard