なんとなくで使いがちなpタグ。
本当にpタグでいいのか・・?と疑問が浮かんだので、
HTML標準仕様である Living Standard を参考に改めて考えてみました。
引用:
HTML Standard
HTML Standard 日本語訳
結論
先に個人的解釈としての結論をまとめました。
1.pタグは段落を明示的に表すタグであり、pタグを使わなくても段落は存在する。
フレージングコンテンツではないフローコンテンツ(昔でいうブロック要素)ごとで段落が区切られる?
<h1>見出し</h1>
段落1
<p>段落2</p>
<div>
段落1
<ul>
<li>段落2</li>
<li>段落3</li>
</ul>
段落4
</div>
2.pタグよりも適切なタグがある場合はそのタグを使う。(footerタグ、addressタグなども候補になる)
liタグやddタグもpタグと同じように段落を作るものとして扱うほうがよさそうです。
✕:<p>Author: fred@example.com</p>
〇:<address>Author: fred@example.com</address>
✕:<li>
<p>hoge</p>
<p>hugo</p>
</li>
〇:<li>hoge</li>
<li>hugo</li>
3.inputやimgやaタグなどのフレージングコンテンツを段落として扱いたかったらpタグで囲う。
フレージングコンテンツが連続していると一つの段落とみなされる?
ので段落として扱いたい場合はpタグもしくは他の段落を表すタグを使用する。
<p><label>Name: <input name="n"></label></p>
<p><img src="hoge.jpg" alt="段落として扱いたい画像"></p>
pタグ
Living Standard 内のpタグの記述を見ていきます
基本情報
- カテゴリー:
パルパブルコンテンツ。
- この要素を使用できるコンテキスト:
- フローコンテンツが期待される場所。
- コンテンツモデル:
- フレージングコンテンツ。
- text/htmlにおけるタグ省略:
- p要素がaddress、article、aside、blockquote、details、div、dl、fieldset、figcaption、figure、footer、form、h1、h2、h3、h4、h5、h6、header、hgroup、hr、main、menu、nav、ol、p、pre、section、table、ul要素の直後に存在する場合、または親要素で追加のコンテンツが存在せずかつ親要素がa、audio、del、ins、map、noscript、video要素、または自律カスタム要素でないHTML要素である場合、p要素の終了タグは省略することができる。
p要素は段落を表す。
パルパブルコンテンツなので基本的に中身が必要であるということと、
終了タグを省略できる場合があるということくらいですね。(あまりお勧めできませんが、、)
Note
段落は通常、視覚的なメディアでは隣接するブロックから物理的に空白行で区切られたテキストのブロックによって表されますが、スタイルシートまたはユーザーエージェントは、たとえばインラインピルクロウを使用するなど、別の方法で段落の区切りを提示することで等しく正当化されます(¶) 。
ピルクロウという段落記号(¶)を使うことでも段落を表すことができる。
ということですかね、、?
Example1
<p>The little kitten gently seated herself on a piece of
carpet. Later in her life, this would be referred to as the time the
cat sat on the mat.</p>
<fieldset>
<legend>Personal information</legend>
<p>
<label>Name: <input name="n"></label>
<label><input name="anon" type="checkbox"> Hide from other users</label>
</p>
<p><label>Address: <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>
簡単な例ですが、
inputなどのフレージングコンテンツを段落としたい箇所はpタグで囲む
ということがわかります。
Example2
より具体的な要素がより適切な場合は、p要素を使用しないでください。
次の例は技術的に正しいです:
<section>
<!-- ... -->
<p>Last modified: 2001-04-23</p>
<p>Author: fred@example.com</p>
</section>
ただし、次のようにマークアップする方が適切です。
<section>
<!-- ... -->
<footer>Last modified: 2001-04-23</footer>
<address>Author: fred@example.com</address>
</section>
または:
<section>
<!-- ... -->
<footer>
<p>Last modified: 2001-04-23</p>
<address>Author: fred@example.com</address>
</footer>
</section>
pタグ以外に適切なタグがあればそれを使用する
適切なタグがないか探す必要があります。
Example3
リスト要素(特に、ol要素とul要素)は、p要素の子にすることはできません。したがって、文に箇条書きが含まれている場合、どのようにマークアップする必要があるのか疑問に思うかもしれません。
For instance, this fantastic sentence has bullets relating to
・wizards,
・faster-than-light travel, and
・telepathy,
and is further discussed below.
解決策は、HTML用語の段落が論理的な概念ではなく、構造的なものであることを認識することです。 上記の素晴らしい例では、この仕様で定義されているように、実際には5つの段落があります。リストの前に1つ、各箇条書きに1つ、リストの後に1つです。
したがって、上記の例のマークアップは次のようになります。
<p>For instance, this fantastic sentence has bullets relating to</p>
<ul>
<li>wizards,
<li>faster-than-light travel, and
<li>telepathy,
</ul>
<p>and is further discussed below.</p>
複数の「構造」段落で構成されるこのような「論理」段落のスタイルを簡単に設定したい作成者は、p要素の代わりにdiv要素を使用できます。
したがって、たとえば上記の例は次のようになります。
<div>For instance, this fantastic sentence has bullets relating to
<ul>
<li>wizards,
<li>faster-than-light travel, and
<li>telepathy,
</ul>
and is further discussed below.</div>
この例にはまだ5つの構造段落がありますが、今では作成者は例の各部分を個別に考慮する必要がなく、divだけをスタイルできます。
構造段落、論理段落の解釈がとても難しいですが、
この例で重要な点は、
pタグで囲わなくてもHTMLは段落と認識する
ということだと思います。
ただ疑問点は残るのでHTMLにおける段落(Paragraphs)そのものの定義の章があったのでそちらも見ていきます。
段落(Paragraphs)
Note
このセクションで定義されている段落という用語は、p要素の定義以外にも使用されます。ここで定義されている段落の概念は、ドキュメントの解釈方法を説明するために使用されます。 p要素は、段落をマークアップするいくつかの方法の1つにすぎません。
段落は通常、タイポグラフィーのように、特定のトピックについて説明する1つ以上の文でテキストのブロックを形成する一連のフレージングコンテンツですが、より一般的な主題のグループ化にも使用できます。たとえば、住所、フォームの一部、署名欄、または詩のスタンザと同様に、段落でもあります。
pタグは段落をマークアップする方法の1つであり、pタグ以外のタグも段落を表すことができる
pタグの例にもありましたがaddressタグやliタグもHTMLでは段落とみなすということかなと思います。
Example
次の例では、セクションに2つの段落があります。また、段落ではないフレージングコンテンツを含む見出しもあります。コメントおよび要素間の空白が段落を形成しないことに注意してください。
<section>
<h1>Example of paragraphs</h1>
This is the <em>first</em> paragraph in this example.
<p>This is the second.</p>
<!-- This is not a paragraph. -->
</section>
この章では、pタグで囲っていない文に対して一つ目の段落ですと述べているので、
pタグで囲わなくてもHTMLは段落と認識する
ことが明確になりました。
これ以降の内容はpタグそのものにはあまり関係なさそうだったので割愛します。
まとめ
やはりそもそもの英文が難しかったり翻訳の関係で解釈が人によって異なるのは仕方ないと改めて思いました、、。
別の解釈や間違い等ありましたらコメントにてご指摘お願いしますm(_ _)m。