<p>: 段落要素

Baseline Widely available

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

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

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

試してみましょう

<p>
  ヤモリは通常小型で夜行性のトカゲの一群である。南極大陸を除くすべての大陸に生息している。
</p>

<p>
  ある種は、人工的な光に誘われて集まる昆虫を捕食するために、家屋に生息している。
</p>

p {
  margin: 10px 0;
  padding: 5px;
  border: 1px solid #999999;
}

属性

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

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

アクセシビリティ

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

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

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

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

例

HTML

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

html
<p>
  段落を空白行で区切るのが読者が目を通すのに最も簡単ですが、最初の行を字下げして区切ることもできます。これは印刷時の用紙節約など、スペースを節約するためによく用いられます。
</p>

<p>
  編集を前提とした文章（学校のレポートや下書きなど）では、区切りとして空白行とインデントの両方が用いられます。完成した作品において両方を併用することは、冗長で素人っぽいとみなされます。
</p>

<p>
  非常に古い文書では、段落は特別な記号である ¶、いわゆるピルクロウで区切られていました。現在では、これは圧迫感があり読みにくいと考えられています。
</p>

<p>
  どれだけ読みにくくなるのでしょうか？やってみましょう。
  <button data-toggle-text="こりゃダメだ、戻して！">
    段落にピルクロウを使う
  </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,
  ];
});

技術的概要

コンテンツカテゴリー許可されている内容タグの省略許可されている親要素暗黙の ARIA ロール許可されている ARIA ロール DOM インターフェイス

フローコンテンツ、知覚可能コンテンツ

記述コンテンツ

開始タグは必須。終了タグは、この <p> 要素の直後に続く要素が <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>, <pre>, <search>, <section>, <table>, <ul> または別の <p> 要素のいずれかである場合、または親要素内でそれ以降にコンテンツがなく、親要素が <a>, <audio>, <del>, <ins>, <map>, <noscript>, <video> 要素、または自律型カスタム要素ではない場合は省略することが可能。

フローコンテンツを受け入れるすべての要素

paragraph

すべて

HTMLParagraphElement