トップページ  > HTML Living Standard  > <p>

★HTML Living Standard リファレンス

<p> …… 段落を表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

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

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

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

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

</p> の省略について

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

リスト要素とp要素

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

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

■使用例

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

HTMLソース

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

ブラウザ上の表示

池のほとりにかえるが住んでいました。 かえるは自分の名前があまり好きではありませんでした。
「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」
かえるはまいにちそう考えて暮らしていました。

ある朝かえるは思いました。
「そうだ、神様にお願いして新しい名前をつけてもらおう。 神様ならきっと素敵な名前をつけてくださるはずだよ。」
そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。

■使用例

HTMLソース

<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>
↓↓↓

ブラウザ上の表示

個人情報

■使用例

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

HTMLソース

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

ブラウザ上の表示

私が特に好きなのは

  • はまち
  • サーモン
  • えび

ですが、もちろん他も食べます。

■使用例

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

HTMLソース(技術的には誤りではありませんが…)

<section>
 <p>最終更新日: 2001-04-23</p>
 <p>作成者: fred@example.com</p>
</section>

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

HTMLソース(適切なマークアップ1)

<section>
 <footer>最終更新日: 2001-04-23</footer>
 <address>作成者: fred@example.com</address>
</section>

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

HTMLソース(適切なマークアップ2)

<section>
 <footer>
  <p>最終更新日: 2001-04-23</p>
  <address>作成者: fred@example.com</address>
 </footer>
</section>

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ