このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<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 プロパティを使用して効果を得るようにしてください。
p { margin-bottom: 2em; /* 段落の後の空白を増加させる */}例
HTML
<p> これはテキストの最初の段落です。これはテキストの最初の段落です。これはテキストの最初の段落です。これはテキストの最初の段落です。</p><p> これはテキストの二番目の段落です。これはテキストの二番目の段落です。これはテキストの二番目の段落です。これはテキストの二番目の段落です。</p>結果
段落のスタイル付け
既定で、ブラウザーは段落を単一の空行で分割します。例えば先頭行を字下げするなど、他の分割方法はCSS で実現することができます。
HTML
<p> 段落を空白行で区切るのが読者が目を通すのに最も簡単ですが、最初の行を字下げして区切ることもできます。これは印刷時の用紙節約など、スペースを節約するためによく用いられます。</p><p> 編集を前提とした文章（学校のレポートや下書きなど）では、区切りとして空白行とインデントの両方が用いられます。完成した作品において両方を併用することは、冗長で素人っぽいとみなされます。</p><p> 非常に古い文書では、段落は特別な記号である ¶、いわゆるピルクロウで区切られていました。現在では、これは圧迫感があり読みにくいと考えられています。</p><p> どれだけ読みにくくなるのでしょうか？やってみましょう。 <button data-toggle-text="こりゃダメだ、戻して！"> 段落にピルクロウを使う </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", (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> 要素の直後に続く要素が<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> 要素、または自律型カスタム要素ではない場合は省略することが可能。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | paragraph |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | HTMLParagraphElement |
仕様書
| Specification |
|---|
| HTML # the-p-element |