HTML <p>タグ


段落は次のようにマークアップされます。

<p>This is some text in a paragraph.</p>

以下の「自分で試してみてください」の例をもっと見てください。


定義と使用法

<p>タグは段落を定義します

<p> ブラウザは、各要素の前後に1行の空白行を自動的に追加します。

ヒント: CSSを使用して段落のスタイルを設定します。


ブラウザのサポート

Element
<p> Yes Yes Yes Yes Yes

グローバル属性

この<p>タグは、HTMLのグローバル属性もサポートしています。


イベント属性

この<p>タグは、HTMLのイベント属性もサポートしています。



その他の例

段落内のテキストを揃える(CSSを使用):

<p style="text-align:right">This is some text in a paragraph.</p>

CSSを使用して段落のスタイルを設定します。

<html>
<head>
<style>
p {
  color: navy;
  text-indent: 30px;
  text-transform: uppercase;
}
</style>
</head>
<body>

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

</body>
</html>

 段落の詳細:

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

HTMLの詩の問題:

<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>

関連ページ

HTMLチュートリアル:HTML段落

HTML DOMリファレンス:段落オブジェクト


デフォルトのCSS設定

ほとんどのブラウザは<p>、次のデフォルト値で要素を表示します。

p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}