<p> …… 段落を表す

<p>タグは、段落を表す際に使用します。

■使用例

以下のサンプルは、p要素のシンプルな使用例です。

<p>
池のほとりにかえるが住んでいました。
かえるは自分の名前があまり好きではありませんでした。<br>
<i>「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」</i><br>
かえるはまいにちそう考えて暮らしていました。
</p>
<p>
ある朝かえるは思いました。<br>
<i>「そうだ、神様にお願いして新しい名前をつけてもらおう。
神様ならきっと素敵な名前をつけてくださるはずだよ。」</i><br>
そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。
</p>

</p> の省略について

p要素の終了タグ </p> は省略可能と理解している人がいるかもしれません。 その理解でおおむね誤りではありませんが、 厳密に定義するなら </p> は以下のいずれかの条件を満たす場合に省略可能です。

• 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 p pre section table ul が続く場合
• 親要素が a audio del ins map noscript video 以外のHTMLの標準仕様にある要素で、かつ、親要素のなかにそれ以上コンテンツが存在しない場合

■使用例

以下のサンプルは、p要素を使用してフォームの入力項目を区切っています。 フォームの入力項目を区切る目的には、br要素で改行させるよりもp要素で段落を分けるほうが適切です。

<fieldset>
 <legend>個人情報</legend>
 <p>
   <label>名前: <input name="n"></label>
   <label><input name="anon" type="checkbox"> 他のユーザーには非表示にする</label>
 </p>
 <p><label>住所: <textarea name="a"></textarea></label></p>
</fieldset>

より適切な要素がないか検討する

p要素よりも具体的な要素の方が適切な場合は、そちらを優先して使用してください。 例えば、連絡先を表す際にp要素でマークアップしても技術的には誤りではありませんが、 連絡先はaddress要素でマークアップした方がより適切でしょう。

■使用例

p要素より具体的な要素の方が適切な場合には、そちらを使用します。 以下のサンプルの場合、p要素でマークアップしても技術的には誤りではありませんが…

<section>
 <p>最終更新日: 2001-04-23</p>
 <p>作成者: [email protected]</p>
</section>

例えば、以下のようにマークアップした方がより適切でしょう。

<section>
 <footer>最終更新日: 2001-04-23</footer>
 <address>作成者: [email protected]</address>
</section>

あるいは、以下のようにマークアップしても良いでしょう。

<section>
 <footer>
  <p>最終更新日: 2001-04-23</p>
  <address>作成者: [email protected]</address>
 </footer>
</section>

リスト要素とp要素

ol要素やul要素などのリスト要素は、 p要素の子にすることはできません。 文の途中に箇条書きが含まれている場合、箇条書きの前に終了タグ </p> を記述してp要素を閉じ、 箇条書きの後に開始タグ <p> を記述して新しいp要素にすると良いでしょう。

■使用例

ol要素やul要素などのリスト要素は、p要素の子になることはできません。 以下のサンプルでは、ul要素の前後でp要素が区切られている点に注意してください。

<p>私が特に好きなのは</p>
<ul>
 <li>はまち
 <li>サーモン
 <li>えび
</ul>
<p>ですが、もちろん他も食べます。</p>

尚、ol要素やul要素などのリスト要素は、 div要素の子にすることができます。 リスト要素の前後でp要素を分割してしまうと、CSSによるスタイリングがしにくくなることがあります。 そのような場合には、p要素の代わりにdiv要素で全体を囲んでしまうのも一案でしょう。

p要素のブラウザ上の表示

p要素は、一般的なブラウザ（ユーザーエージェント）では、前後を空白行で区切ったブロックとして表示されます。 ただし、スタイルシートの指定方法やユーザーエージェントによっては、 異なる方法で段落の区切りが表現される可能性があります。

例えば、段落の始めか終りにパラグラフマーク（ ¶ ）をつけて、 段落の区切りを表すユーザーエージェントがあるかもしれません。

■関連項目

Sponsors