仕様

P要素は、
段落を表します。

p段落 (Paragraph)
カテゴリ
  • フローコンテンツ
  • パルパブルコンテンツ
種類通常要素
この要素を
使用できる
状態		フローコンテンツを受け入れる要素。
許可されて
いる内容		フレージングコンテンツ。
属性グローバル属性のみ
text / html
での
タグの省略		省略できません。
許可されて
いるARIA		任意。
[既定値 : なし]
DOM
インター
フェイス
HTMLParagraphElement
  1. [Exposed=Window]
  2. interface HTMLParagraphElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. };
レンダリング
フローコンテンツ
  1. p {
  2. display: block;
  3. margin-block-start: 1em;
  4. margin-block-end: 1em;
  5. unicode-bidi: isolate;
  6. unicode-bidi: bidi-override;
  7. }

CSS を大雑把に読むと、 フローレイアウトに配置されたときにブロックレベルのボックスを生成します。 ブロック方向の前後(上下)の余白を１文字分空けます。 などになります。

参加
コンテキスト		ブロックフォーマットコンテキスト
確立
コンテキスト		ブロックフォーマットコンテキスト
(許可されている内容がフレージングコンテンツだけなので、実質はインラインフォーマットコンテキスト)
p要素は、段落を表します。

  1. <div>
  2. <p>
  3. <span>Text</span>
  4. <span>Text</span>
  5. </p>
  6. </div>

Text Text

参照元
  1. HTML Living Standard. 4.4.1 The p element
  2. HTML Living Standard. 15 Rendering 15.3.3 Flow content
  3. HTML 5.2 W3C 勧告. 4.4.1 The p element
  4. HTML 4.01 Specification W3C 勧告. 9.3.1 Paragraphs: the P element
  5. MDN Web Docs. HTML <p>: 段落要素

使用可能な箇所

フローコンテンツを
受け入れる要素に
配置できます。

p要素は、フローコンテンツを受け入れる要素に配置できます。

  1. <div>
  2. <p>text</p>
  3. </div>

フローコンテンツを配置できる div要素のコンテンツの一部として、p要素を配置できます。

text

配置できるコンテンツ

フレージングコンテンツを
配置できます。

p要素は、フレージングコンテンツを配置できます。

  1. <p>
  2. <span>test</span>
  3. </p>

p要素のコンテンツの一部として、フレージングコンテンツである span要素を配置できます。

test

属性

グローバル属性のみ、
設定できます。

p要素は、グローバル属性のみ 設定できます。

気を付ける点

段落

  1. <div>
  2. <p>text</p>
  3. <p>text</p>
  4. </div>

p要素は、段落を表します。改行や行間を開けるなどの装飾の為に用いるのは望ましくありません。
行間を詰めたい為に複数の段落を１つに纏めるのもよくありません。
装飾は CSSで行って、文脈から段落ごとに p要素を用いましょう。

text

text