<p>: 段落要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

試してみましょう

コンテンツカテゴリー フローコンテンツ、知覚可能コンテンツ
許可されている内容 記述コンテンツ
タグの省略 開始タグは必須。この <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 ロール paragraph
許可されている ARIA ロール すべて
DOM インターフェイス HTMLParagraphElement

属性

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

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

例

HTML

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

結果

段落のスタイル付け

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

HTML

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

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

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

JavaScript

js
document.querySelector("button").addEventListener("click", (event) => {
  document.querySelectorAll("p").forEach((paragraph) => {
    paragraph.classList.toggle("pilcrow");
  });

  [event.target.innerText, event.target.dataset.toggleText] = [
    event.target.dataset.toggleText,
    event.target.innerText,
  ];
});

結果

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

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

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

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

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

仕様書

Specification
HTML Standard
# the-p-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報