HTML

<p> marks one paragraph — a meaningful chunk of text. Use <br> only for a visual line break, and <p> when you want to separate ideas.

p 要素

<p> は“文章のひとかたまり”を示すタグで、見た目の改行ではなく“意味の区切り”を伝えるために使う — 改行だけなら <br>, 内容を分けるなら <p> が基本です。

そもそも「段落」とは？

語源

“paragraph” はギリシャ語の παράγραφος（parágraphos） に由来し、ラテン語・フランス語を経て現代英語の語形になりました。

Web における意義

情報を「意味」で区切り、スクリーンリーダーや検索エンジンに文章構造を伝えるための最小単位。

可視化と論理構造の分離

見た目の改行 <br> と違い、<p> は「ここから新しいトピックが始まる」という論理情報を持ちます。

最小構文と書式

<p>これは最初の段落です。</p>
<p>続く段落は別のアイデアを述べています。</p>

省略形 : <p> は開始タグが必須で、終了タグは省略可能です（次にブロック要素などが来た時点で自動的に閉じられます）。ただし、意図しない自動終了を避けるため常に </p> を書くことをおすすめします。

デフォルトレンダリング

ブラウザは <p> をブロック要素として表示します。標準のスタイルでは前後に上下1emほどの余白がつきます。

行の高さ（line-height）はユーザーやフォントにより変わります（よくある初期値は1.2前後）。

マージンの折り畳み（margin collapsing）：隣接する段落の上下マージンは 1 つに“重なる”ため、意図より余白が小さく見えることがあります。

よくある誤用とアンチパターン

見出し目的で <p class="title">

代わりに <h1>-<h6> を使用。スクリーンリーダが文書階層を誤認します。

リスト代わりに複数段落

項目の集合は <ul><li>…</li></ul> が適切。意味付けが欠落すると SEO にも不利。

段落内に入れ子のブロック要素

p は “汎用コンテナ” ではありません。<div>・<section>・<article> 等を段落内に含めるとパーサが自動で </p> を挿入し、意図しない階層崩れが起こります。

アクセシビリティ & SEO への影響

スクリーンリーダー読み上げ

多くの SR は段落境界でポーズを付けます。不要な <br> 多用は可読性を損ないます。

汎用 ARIA ロール

通常は role を付ける必要はありません（デフォルトの意味で十分です）。

構造化データ

<p> 自体に特別な構造化データの型はありません。記事本文などの親要素（例：<article>）に articleBody 等で意味を持たせると、検索エンジンに構造を伝えやすくなります。

フォームや対話型 UI との連携

フォームでは、説明文や補足テキストに <p> を使って読みやすく区切るのは良いアイデアです。必須ではありませんが、<label> の関連付け（for と id）の方が重要です。

モダン CSS と p 要素

Container Queries

段落ごとに container-type: inline-size; を指定すれば、幅に応じ文字サイズや列数を変えられる。

View Transitions API

p に view-transition-name を付けてページ間の差分をスムーズにアニメーション。

CSS Anchor Positioning

コメントアイコンを p 行内でアンカー基準に表示するなど、インライン-レベルでも柔軟に配置。

上級者向けメタ情報

削除済み・非推奨属性

align, clear, compact などは HTML 4.01 旧来属性。CSS へ置換が必須。

Shadow DOM と <slot>

Web Components 内で段落をスロットに流し込む場合、元文書の p が 暗黙終了 しやすいので、テンプレート側は div を用い意図しない閉じタグ挿入を回避。

DOM API

ブラウザは HTMLParagraphElement インタフェースを実装。document.createElement('p') で生成可能。型判定は instanceof HTMLParagraphElement。

印刷フロー

印刷時の段落分割を避けたいときは p { break-inside: avoid; } を優先して使います（古いブラウザ向けに page-break-inside: avoid; を併記してもOK）。

国際化 (i18n)

字下げは text-indent が書字方向（inline-start）に沿って働くため、通常はそのままでOKです。縦書きやRTLでも論理方向に追従します。

テスト・検証のためのスニペット

<p>
	「p 要素」は単なる視覚上の改行ではなく、論理構造を明示するための
	セマンティックなタグです。スクリーンリーダーは段落の境界で
	ポーズを入れます。検索エンジンにも段落の区切りが伝わりやすくなります。
</p>

<p>
	Container Queries を併用すると、段落幅が
	45 文字未満になった瞬間自動的に字下げを解除する――
	といった高次な制御も容易です。
</p>

p {
	line-height: 1.8;
	max-width: 60ch;
	margin-inline: auto;
}
p::first-letter {
	font-size: 2.4em;
	font-weight: 700;
}