p 要素

4.4.1 p 要素

カテゴリー:
フロー・コンテント
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フロー・コンテントが期待される場所
コンテントモデル:
フレージング・コンテント
コンテント属性:
グローバル属性
text/html におけるタグの省略:

p 要素の直後に address, article, aside, blockquote, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, nav, ol, p, pre, section, table, ul 要素が続く、または、親要素に他のコンテンツが存在せず、その親要素が a 要素でなければ、p 要素の終了タグを省略することができます。

指定可能な ARIA role 属性 の値:
あらゆるロールの値
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
interface HTMLParagraphElement : HTMLElement {};

p 要素は、段落表します。

段落は、ビジュアルメディアでは、通常は、隣接したブロックを空白行で挟んで物理的に分離したテキストブロックによって表されますが、スタイルシートやユーザーエージェントは、異なる手段で段落改行を提供しても問題はありません。例えば、インラインの段落記号 (¶) です。

次の例の HTML は準拠しています:

<p>小さな子猫がおとなしくカーペットの上で
お座りしていた。年をとってから、これは、その猫がマットの上に
座った瞬間だと言われることでしょう。</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>There was once an example from Femley,<br>
Whose markup was of dubious quality.<br>
The validator complained,<br>
So the author was pained,<br>
To move the error from the markup to the rhyming.</p>

より意味が限定された、より適切な要素が他にあるのであれば、p 要素を使うべきではありません。

次の例は技術的には正しいです:

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

しかし、次のようにマークアップした方が良いでしょう:

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

または:

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

リスト要素(特に olul 要素)は、p 要素の子となることはできません。そのため、センテンスに黒丸リストが含まれるとき、どうマークアップすればよいか悩むでしょう。

たとえば、この空想のセンテンスには、

  • 魔法使い
  • 超高速移動
  • テレパシー

に関する黒丸がありますが、下記に詳しく述べます。

この答えは、HTML 用語における段落は論理上の概念ではなく構造的な概念であることに気づくことです。この上記の空想のセンテンスには、この仕様で定義されているとおりの段落が実際に 5 つあります。リストの前、それぞれの黒丸のそれぞれ、そして、リストの後です。

従って、上記の例のマークアップは次のようになるでしょう:

<p>たとえば、この空想のセンテンスには、</p>
<ul>
 <li>魔法使い
 <li>超高速移動
 <li>テレパシー
</ul>
<p>に関する黒丸がありますが、下記に詳しく述べます。</p>

ウェブ制作者は、このような複数の"構造的"な段落から構成される"論理的"な段落を便宜的にスタイリングしたいなら、p 要素の代わりに div 要素を使うことができます。

ゆえに、たとえば、上記の例は次のようになるでしょう:

<div>たとえば、この空想のセンテンスには、
<ul>
 <li>魔法使い
 <li>超高速移動
 <li>テレパシー
</ul>
に関する黒丸がありますが、下記に詳しく述べます。</div>

この例にも 5 つの構造的な段落がありますが、ウェブ制作者はこの例のそれぞれの部分を考慮する必要はなく、div だけをスタイルすればよくなります。


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-p-element