pタグ -段落(パラグラフ)を表す|HTML辞典
<p>タグとは?
<p>タグは、HTML文書内で段落(パラグラフ)を表すタグです。
文章を適切に区切り、読みやすい構造を作るために使用されます。
ブラウザは<p>タグの前後に自動で改行を挿入するため、テキストを適切にグループ化できます。
基本情報
コンテンツモデル
フローコンテンツ(Flow Content)、パルパブルコンテンツ(Palpable Content)
主にテキストのグループ化に使用され、ユーザーに視認できるコンテンツを含みます。
閉じタグの有無
<p>は開始タグ(<p>
)と閉じタグ(</p>
)の両方が必要です。
ただし、ブラウザは暗黙的に閉じタグを補完するため、次の要素が別のブロック要素(例:<h1>
や <div>
)の場合、閉じタグを省略しても自動で補完されます。
しかし、省略せずに明示的に閉じるのが推奨されます。
基本的な記述方法
<p>
は 文章のまとまりを表すために使用 します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落の例</title>
</head>
<body>
<h1>HTMLの基本</h1>
<p>HTMLは、Webページを作成するためのマークアップ言語です。</p>
<p>段落ごとに分けることで、文章を見やすく整理できます。</p>
</body>
</html>
ポイント:
- <p>は通常、1つの文章のまとまり(パラグラフ)を表します。
- <p>はブロックレベルの要素であり、前後に自動で改行が入ります。
使用できる主な属性
属性名 | 説明 | 例 |
---|---|---|
id | 一意の識別子を設定 | <p id="intro">はじめに</p> |
class | CSSのクラスを適用 | <p class="important">重要な情報</p> |
style | インラインスタイルを適用 | <p style="color: red;">赤い文字</p> |
改行(<br>)との違い
<p> は段落をグループ化するタグで、<br> は単純に改行を挿入するタグです。
改行を入れたいだけなら <br>
を使い、文章の意味的な区切りには <p>
を使用します。
<p>これは1つの段落です。<br>このように改行することもできます。</p>
使用上の注意点
✅ <p> の中にブロック要素を入れない
NG例(誤った使用法)
<p>この中には <div>ブロック要素</div> を入れられません。</p>
OK例(適切な使用法)
<p>この段落の後に別のブロック要素を配置します。</p>
<div>ブロック要素</div>
✅ <p> の連続使用に注意
<p>
を連続して使用すると、デフォルトのCSSで上下に余白(margin
)が入るため、余計な間隔が空くことがあります。- 間隔を調整したい場合は CSS で
margin
を変更するとよい。
p {
margin-bottom: 10px;
}
関連タグ
まとめ
<p>タグは、HTML文書において文章を適切に整理し、段落としてグループ化するための基本的なタグ です。
適切に使用することで、文章が読みやすくなり、構造化されたWebページを作成できます。
ブロック要素を含めないよう注意し、必要に応じてCSSで余白を調整するとよいでしょう。