改行だけならでいい？

見た目の行折り返しだけなら。内容を区切るならが基本です。

の終了タグは省略してもいい？

技術的には省略可能ですが、思わぬ自動終了を避けるため常に閉じることをおすすめします。

の中にを入れていい？

入れられません。ブラウザが自動でを挿入し構造が崩れます。

段落の余白が消えた（少なく見える）

上下マージンの折り畳みの可能性。親に padding-block を入れる等で回避します。

HTML

Q: 改行だけなら でいい？

見た目の行折り返しだけなら 。内容を区切るなら が基本です。

Q: の中に を入れていい？

入れられません。ブラウザが自動で を挿入し構造が崩れます。

この記事では「HTML」について、基本の意味と使い方を初心者向けにやさしく説明します。

この記事でわかること

pが表す段落の単位
brとの意味の違い
文章構造と見た目を分けて設計する方法

<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タグ）

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

まずここだけ

<p> は「段落（ひとまとまりの文）」を示すタグ。
改行の見た目だけなら <br>、内容を分けるなら <p>。
必ず <p>...</p> と閉じる（自動で閉じられると構造が乱れやすいため）。
<p> の中にはブロック要素を入れない（入れると勝手に閉じられる）。
段落間の余白が「消えた」ように見えたらマージンの折り畳みを疑う。

そもそも「段落」とは？

語源: “paragraph” はギリシャ語の παράγραφος（parágraphos）に由来し、ラテン語・フランス語を経て現代英語の語形になりました。
Web における意義: 情報を「意味」で区切り、スクリーンリーダーや検索エンジンに文章構造を伝えるための最小単位。
可視化と論理構造の分離: 見た目の改行 <br> と違い、<p> は「ここから新しいトピックが始まる」という論理情報を持ちます。

最小構文と書式

HTML

<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 は HTML 4.01 まで段落の横位置を変えるために使われていた旧来の属性で、現在は CSS（例：p { text-align: center; } など）で置き換える必要があります。
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でも論理方向に追従します。

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

HTML

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

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

CSS

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

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

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

FAQ

改行だけなら <br> でいい？: 見た目の行折り返しだけなら <br>。内容を区切るなら <p> が基本です。
<p> の終了タグは省略してもいい？: 技術的には省略可能ですが、思わぬ自動終了を避けるため常に閉じることをおすすめします。
<p> の中に <div> を入れていい？: 入れられません。ブラウザが自動で </p> を挿入し、構造が崩れます。
段落の余白が消えた（少なく見える）: 上下のマージンが折り畳みされている可能性。親に padding-block を入れる等で回避できます。
最適な段落の横幅は？: 読みやすさ重視なら max-width: 60–70ch がよく使われます。

よくあるエラー早見表

<p>の中に<div>を入れた

ブラウザが直前で</p>を自動挿入。構造が崩れる原因。

HTML

<p>
    段落の途中で
    <div>ボックス</div>
    を入れています。
</p>

実際には <div> の直前で </p> が自動で挿入されてしまい、意図した入れ子にならず構造が崩れます。

終了タグを書かなかった

次のブロック要素で自動終了し、意図と違う入れ子に見えることがある。

改行目的で<p>を連発

意味の区切りが伝わらない。単純な改行は<br>で。

段落間の余白が多すぎ/少なすぎ

margin-blockかマージン折り畳みを調整。親側paddingで安定させる。