p要素とは

p要素は、paragraph（パラグラフ）の略で、<p> 〜 </p> で挟んだ範囲が、段落であることを表す要素です。Webサイト上のほとんどの概要文や説明文は、このp要素を使います。

p要素の例
<p>俺が、伝説のWebクリエーターになる男だ。</p>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

p要素のサンプルをもっと見る

意味・役割
段落を表す要素。
利用できるバージョン（HTML4.01以降）
全てのバージョン
コンテンツ・カテゴリ
（HTML5より前：ブロックレベル要素）
コンテンツ・モデル（梱包できる要素）
フレージング・コンテンツ
（HTML5より前：インライン要素）
この要素を配置できる親要素
フロー・コンテンツが配置できる要素

p要素で使える属性

p要素には、どの要素にでも使えるグローバル属性が使えます。
なお、HTML5より前のバージョンにおいては、以下の属性も使えました。

align属性 XHTML 1.1で廃止

要素内の行揃えを指定する属性。
この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:text-align プロパティで行うようにしましょう。

属性値
  • "left"： 左揃え（初期値）
  • "center"： 中央揃え
  • "right"： 右揃え
  • "justify"： 両端揃え（複数行の英文に有効）
利用できるバージョン（HTML4.01以降） HTML4.01で非推奨
HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
使用例
<p align="center">中央揃え</p>
<p align="right">右揃え</p>
<p align="justify">両端揃え：Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

p要素のデフォルトスタイル

一般的なブラウザでp要素を表示した場合、
p要素の 上下に1文字文のスペース（間隔） が確保されます。
具体的には、下記のCSSと同等のスタイルが適用されます。

p要素のデフォルトスタイル
p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

p要素のサンプル

説明文や概要文などは、このp要素でマークアップします。

p要素の例
<p>
  まず、はじめてお伝えしておくと、これは1つ目の段落です。・・・
</p>
<p>
  次にお伝えしたいことは、これが2つ目の段落ということです。・・・
</p>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

なお、p要素よりふさわしい要素がある場合はそちらを使いましょう。

仕様

HTML5.1
4.4.1. The p element
HTML5
4.4.1 The p element
HTML4.01
9.3.1 Paragraphs: the P element

関連する要素

関連するレッスン