定義と使い方

<p>タグは段落（paragraph、文章のまとまり）を表します。

主にテキストコンテンツを段落としてまとめるために使用され、画像や入力フォーム要素のように段落の一部とみなせる要素もコンテンツとして含めることができます。

HTMLは段落にさまざまな意味を付与するために、複数のタグを提供しています。
例えば、<ins>や<address>のようなタグがその役割を担います。そのため、特定の意味を持つ段落を表現する場合は、その意味に適したタグを選択して使用する必要があります。

<p>タグはブロックを構成するブロックレベルタグであり、自身の閉じタグである</p>より前に別のブロックレベルタグが解析されると、自動的に閉じられます。
以下の<p>タグの構文セクションを参照してください。

基本例

以下は<p>タグを使用した例です。

HTML 
<p>
    このタグは段落（paragraph）を表すタグです。
</p>
<p>
    また、HTMLは段落にさまざまな意味を付与するために、複数のタグを提供しています。
    例えば、insやaddressといったタグがその役割を担います。
    そのため、特定の意味を持つ段落を表現する場合は、その意味に適したタグを選択して使用する必要があります。
</p>
ブラウザで実際に表示された様子

<p>タグ内での改行

ほとんどのブラウザでは、<p>タグの上下に間隔が設けられます。
これは視覚的に段落へ余白を与えることで、ユーザーがコンテンツを素早く把握しやすくする効果を持たせるためです。別途視覚的な表現を追加したい場合は、CSSを使用して調整できます。

また、<p>タグ内で改行を行う場合は、<br>を使用します。

HTML <p>タグ内で改行を行うには、<br>を使用します。 
<p>
    このタグは
    <br> <!-- 改行します。 -->
    段落（paragraph）を表すタグです。
</p>
ブラウザで実際に表示された様子

<br>タグを使用せずに、CSSでも改行を行うことができます。

HTML <br>タグを使用せずに、CSSでも改行を行うことができます。 
<p>
    <span style="display: block;">このタグは</span>
    段落（paragraph）を表すタグです。
</p>
ブラウザで実際に表示された様子

<br>タグによる改行と、CSSによる改行には違いがあります。
CSSによる改行は純粋にスタイルを目的としたものである一方、<br>タグによる改行は、テキスト上で行を分けるという明確な目的（連続したテキストの流れから離れ、改行によって文章を区切りたいという意図）を持っています。

使用方法

より具体的な意味を持つタグが適切な場合は、<p>タグを使用してはいけません。

先に述べたとおり、HTMLは段落にさまざまな意味を付与するために複数のタグを提供しています。
例を通して見ていきましょう。

次の例は技術的に正確です。

HTML 
<section>
    ...
    <p>最終更新：2023-04-23</p>
    <p>作成者：author@example.com</p>
</section>

コード補足説明
<section>タグは、文書やアプリケーションにおける一般的なセクションを表します。論理的な観点から、主題ごとのコンテンツグループを示すために使用されます。

しかし、次のようにマークアップするほうが、セマンティクスの観点からより適切です。

HTML 
<section>
    ...
    <footer>最終更新：2023-04-23</footer>
    <address>作成者：author@example.com</address>
</section>

<!-- または -->

<section>
    ...
    <footer>
        <p>最終更新：2023-04-23</p>
        <address>作成者：author@example.com</address>
    </footer>
</section>

コード補足説明
<footer>タグは、記事やコンテンツ領域に関する作成者情報、著作権情報、関連ドキュメントへのリンクなどの内容を表します。また、一般的にはWebページの最下部に配置されるグローバルフッターを示すためにも使用されます。

コード補足説明
<address>タグは、連絡先情報を表します。

上記の例のように、HTMLは段落にさまざまな意味を付与するために複数のタグを提供しています。
段落という概念は、<p>タグで表現される段落以上の意味で用いられます。<p>タグは、段落を表す数ある方法の一つにすぎません。

これは、仕様書においても段落に関する内容として説明されています。

<p>タグの論理的な概念（「段落」という概念）について見てきました。

<p>タグの構文に関する構造的な概念を理解する必要があります。
例を通して見ていきましょう。

例文の段落

この例文の段落を次のようにマークアップすると、誤った構文になります。

誤った構文 
<p>
    読みやすい文章には、次のような内容に関連した箇条書きがあります。
    <ul>
        <li>雪の花のように美しい…</li>
        <li>そっとあなたの手を握って</li>
        <li>目を合わせています</li>
    </ul>
    以下で詳しく説明します。
</p>

<p>タグはブロックを構成するブロックレベルタグであり、自身の閉じタグである</p>より前に別のブロックレベルタグが解析されると、自動的に閉じられます。そのため、上記の構文では<ul>タグに遭遇した時点で、<p>タグの閉じタグである</p>が自動的に生成されるため、エラーが発生します。

HTMLで使用される「段落」という用語は、論理的な概念に加えて、構造的な概念も含んでいます。これは、仕様書において<p>タグを説明する際の重要なポイントとして扱われています。

リスト要素（<ol>および<ul>）は、<p>タグを子要素として含めることはできません。

したがって、上記の例は次のようにマークアップできます。

HTML 
<p>
    読みやすい文章には、次のような内容に関連した箇条書きがあります。
</p>
<ul>
    <li>雪の花のように美しい…</li>
    <li>そっとあなたの手を握って</li>
    <li>目を合わせています</li>
</ul>
<p>
    以下で詳しく説明します。
</p>

<!-- または -->

<div>
    読みやすい文章には、次のような内容に関連した箇条書きがあります。
    <ul>
        <li>雪の花のように美しい…</li>
        <li>そっとあなたの手を握って</li>
        <li>目を合わせています</li>
    </ul>
    以下で詳しく説明します。
</div>

技術的文法の要約

<p>タグの技術的文法の要約
許可されている親要素 フローコンテンツを許可するすべての要素
許可されている子要素 構文コンテンツ
暗黙のrole属性値 paragraph
許可されているrole属性値 すべて（Any）

ブラウザ互換性

pタグのブラウザ互換性
タグ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
<p> 1 12 1 1

仕様書

pタグの仕様書
仕様書
<p> HTML Standard
#the-p-element

参考資料

関連項目