Apr. 8th,2015
要素について
| カテゴリー | フロー・コンテンツ、パルパブル・コンテンツ |
| 利用場所 | フロー・コンテンツが置ける場所 |
| 内容 | フレージング・コンテンツ |
| タグの省略 | 開始タグは省略不可 |
| “p”要素の直後に“address”要素、“article”要素、“aside”要素、“blockquote”要素、“details”要素、“div”要素、“dl”要素、“fieldset”要素、“figcaption”要素、“figure”要素、“footer”要素、“form”要素、“h1~h6”要素、“header”要素、“hgroup”要素、“hr”要素、“main”要素、“menu”要素、“nav”要素、“ol”要素、“pre”要素、 “section”要素、“table”要素、“ul”要素のいずれかもしくは別の“p”要素が続く場合、または親要素に他のコンテンツが存在せずその親要素が“a”要素、“audio”要素、“del”要素、“ins”要素、“map”要素、“noscript”要素、“video”要素、自律カスタム要素のいずれでもでない場合は終了タグを省略可能 |
“p”要素は段落を表す要素です。
一般的なブラウザでは段落の前後を改行して1行分程度の余白を入れて表示します。
サンプルコード
<p>
バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されている。
</p>
<p>
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。
</p>
<p>
バナナにはビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。
</p>
バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されている。
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。
バナナにはビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。
HTMLの“段落”
“段落”は一般的には特定のテーマについて書かれた複数の文の集まりですが、HTMLでの“段落”はこのような意味上の概念というよりも構造上の概念なのでもっと雑多なテーマ分けにも“段落”を使用することができます。いくらかのフレージング・コンテンツの集まりは“段落”であり、住所やフォームの一部、記事の署名、詩節も“段落”となります。
“p”要素は明示的に段落を表す要素ではありますが、必ずしもすべての“段落”が“p”要素でマークアップされるわけではなく、他に適切な要素があればその要素でマークアップする必要があります。
例えば、“p”要素の中に“ul”要素を配置することはできないので、リストを含む意味上の段落はそのまま“p”要素に含むことはできません。
間違ったマークアップ
<p>
昨日お店で見かけた
<ul>
<li>バナナ</li>
<li>マンゴスチン</li>
<li>ドリアン</li>
<li>バンレイシ</li>
</ul>
はすべて南国で作られる果物だ。
</p>
正しくマークアップするには“p”要素を“ul”要素の前後に分割しますが、これは間違ったマークアップではありません。
<p>
昨日お店で見かけた
</p>
<ul>
<li>バナナ</li>
<li>マンゴスチン</li>
<li>ドリアン</li>
<li>バンレイシ</li>
</ul>
<p>
はすべて南国で作られる果物だ。
</p>
昨日お店で見かけた
- バナナ
- マンゴスチン
- ドリアン
- バンレイシ
はすべて南国で作られる果物だ。
仕様書
“p”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
DOMインターフェース
[Exposed=Window]
interface HTMLParagraphElement : HTMLElement {
[HTMLConstructor] constructor();
// also has obsolete members
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
unicode-bidi: isolate;
}
/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
p {
unicode-bidi: bidi-override;
}
