HTML の <p> 要素は、テキストの段落を表します。視覚メディアにおいて、段落はふつう隣接するブロックと上下の空白や最初の行の字下げによって隔てられたテキストのブロックとして表現されますが、 HTML の段落は画像やフォーム欄などの関連するコンテンツを構造的にまとめることができます。

段落はブロックレベル要素であり、特徴的なのは </p> で閉じる前に他のブロックレベル要素が見つかった場合は自動的に閉じることです。下記の「タグの省略」をご覧ください。

コンテンツカテゴリ フローコンテンツ、知覚可能コンテンツ
許可されている内容 記述コンテンツ
タグの省略 開始タグは必須。後続する要素が <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> または別の <p> 要素のいずれかである、または親要素内で他のコンテンツがなく親要素が <a> 要素ではない場合は終了タグを省略することが可能。
許可されている親要素 フローコンテンツを受け入れるすべての要素
許可されている ARIA ロール すべて
DOM インターフェイス HTMLParagraphElement

属性

この要素にはグローバル属性があります。

メモ: <p>align 属性は廃止済みであり、使用するべきではありません。

<p>これはテキストの最初の段落です。
  これはテキストの最初の段落です。
  これはテキストの最初の段落です。
  これはテキストの最初の段落です。</p>
<p>これはテキストの二番目の段落です。
  これはテキストの二番目の段落です。
  これはテキストの二番目の段落です。
  これはテキストの二番目の段落です。</p>

表示結果は以下のようになります。

段落のスタイル付け

既定で、ブラウザーは段落を単一の空行で分割します。例えば先頭行を字下げするなど、他の分割方法は CSS で実現することができます。

HTML

<p>Separating paragraphs with blank lines is easiest 
for readers to scan, but they can also be separated
by indenting their first lines. This is often used 
to take up less space, such as to save paper in print.</p>

<p>Writing that is intended to be edited, such as school
papers and rough drafts, uses both blank lines and 
indentation for separation. In finished works, combining 
both is considered redundant and amateurish.</p>

<p>In very old writing, paragraphs were separated with a 
special character: ¶, the <i>pilcrow</i>. Nowadays, this
is considered claustrophobic and hard to read.</p>

<p>How hard to read? See for yourself:
  <button data-toggle-text="Oh no! Switch back!">Use pilcrow for paragraphs</button>
</p>

CSS

p {
  margin: 0;
  text-indent: 3ch;
}

p.pilcrow {
   text-indent: 0;
   display: inline;
}
p.pilcrow + p.pilcrow::before {
  content: " ¶ ";
}

JavaScript

document.querySelector('button').addEventListener('click', function (event) {
  document.querySelectorAll('p').forEach(function (paragraph) {
    paragraph.classList.toggle('pilcrow');
  });
  var newButtonText = event.target.dataset.toggleText;
  var oldText = event.target.innerText;
  event.target.innerText = newButtonText;
  event.target.dataset.toggleText = oldText;
});

結果

アクセシビリティの考慮事項

コンテンツを段落に分割すると、ページのアクセシビリティを向上するのに役立ちます。読み上げソフトやその他の支援技術が、このようなユーザーに前後の段落に飛ぶショートカットを提供することができ、空行によって視覚ユーザーが飛ばし見をすることができるのと同様、コンテンツをざっと見ることができるようになります。

段落間の間隔を広げるために空の <p> 要素を使用することは、読み上げ技術の支援の下で操作をしている人にとっては問題になります。読み上げソフトは要素が存在することをアナウンスするものの、その中にはコンテンツが何もないという状況になる可能性があります。これは読み上げソフトを使用している人の利用を混乱させ不満をためる可能性があります。

追加の間隔をあける必要がある場合は、 margin のような CSS プロパティを使用して効果を得るようにしてください。

p {
  margin-bottom: 2em; // 段落の後の空白を増加させる
}

仕様書

仕様書 状態 備考
HTML Living Standard
<p> の定義
現行の標準 最新の W3C スナップショットである HTML5 から変更なし
HTML5
<p> の定義
勧告 align 属性を廃止
HTML 4.01 Specification
<p> の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, ethertank, Potappo
最終更新者: mfuji09,