<p>

<p>これはひとつの段落です。</p>
<p>これは別の段落です。段落の前後には自動で余白が入ります。</p>

sample_p.html

<!-- 複数の段落を連続して使う -->
<article>
  <h2>プログラミングとは</h2>

  <!-- テキストのまとまりを段落で区切ります -->
  <p>プログラミングとは、コンピューターに対して行う命令を記述することです。
  人間がわかる言葉（プログラミング言語）で手順を書き、それをコンピューターが実行します。</p>

  <p>プログラミング言語にはJavaScript・Python・PHP・Swiftなどさまざまな種類があります。
  それぞれ得意な分野が異なるため、目的に応じて言語を選びます。</p>

  <!-- pタグの中にはインライン要素を入れられます -->
  <p>初心者にはまず<strong>HTML</strong>と<em>CSS</em>から始めることをおすすめします。
  詳しくは<a href="/tpl_rep.php?cat=html-beginner&fl=r1">HTML入門</a>をご覧ください。</p>
</article>

<!-- インライン要素・画像との組み合わせ -->
<p>
  <img src="icon.png" alt="注意アイコン" width="16" height="16">
  この操作は取り消せません。<strong>必ずバックアップを取ってから</strong>実行してください。
</p>

<!-- 長い文章を段落で適切に分割 -->
<p>HTMLはWebページの骨格を作るマークアップ言語です。見出し・段落・リンク・画像などの要素を使って文書を構造化します。</p>

<p>CSSはHTMLに見た目を付けるスタイルシート言語です。色・フォント・レイアウトなどを指定します。</p>

<p>JavaScriptはWebページに動きを付けるプログラミング言語です。ボタンを押したときの処理やアニメーションを実装できます。</p>

3つの段落がそれぞれ独立した行で表示され、段落と段落の間には自動的に余白が追加されます。3つ目の段落では「HTML」が太字、「CSS」がイタリック、「HTML入門」がリンクとして表示されます。

サンプルページはこちら

『<p>』はブロックレベル要素のため、前後で自動的に改行されます。段落内で改行したい場合は『<br>』タグを使いますが、段落を区切るには『<p>』を別々に書くほうがHTMLとして正しい使い方です。

『<p>』タグの中には文字・リンク・画像・強調タグ（『<strong>』『<em>』）など、インライン要素を配置できます。ただし、『<p>』の中に別のブロックレベル要素（『<div>』『<p>』など）を入れることはHTMLの仕様上できません。入れ子にしようとするとブラウザが自動的にタグを閉じてしまいます。

改行だけを目的として空の『<p>』タグや『<br>』を連続して使うのは避けましょう。余白はCSSの『margin』や『padding』プロパティで調整するのが正しい方法です。

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

15 以降 ○

14 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

『<p>』要素に対してCSSを指定することで、読みやすさを大幅に向上させることができます。

/* 基本的な段落スタイリング */
p {
  line-height: 1.8;       /* 行間を広げて読みやすくする（本文は1.6〜1.8が目安） */
  margin-bottom: 1.2em;   /* 段落間の余白 */
  color: #333;
}

/* 字下げ（インデント）: 日本語の段落スタイルに多い */
p {
  text-indent: 1em; /* 段落の先頭を1文字分インデント */
}

/* :first-letter 疑似要素でドロップキャップ（デコラティブな先頭文字）*/
p:first-of-type::first-letter {
  font-size: 3em;
  font-weight: bold;
  float: left;
  line-height: 1;
  margin-right: 0.1em;
  color: #4488ff;
}

/* :first-line 疑似要素で最初の行だけスタイルを変える */
p::first-line {
  font-weight: bold;
  color: #222;
}

ブラウザのデフォルトでは、『<p>』の上下には約1em（16px相当）の余白（margin）が付きます。CSSの『margin』で調整する際は、上下どちらかを0にして一方向だけ余白を取る方法がよく使われます。