<p>要素

<p>要素の定義

英語の”paragraph”より。
テキストの「段落」を表すための要素です。 <p> 要素の特徴として、閉じタグの前に別のブロック要素が見つかった場合は、自動的に閉じられます。
通常のHTML要素はどんどん入れ子構造に出来るのですが、<p> 要素の子要素として、<p> 要素を記述したり、<h1> 〜 <h6> 要素や <ul> 要素といったブロック要素を記述したり、といったことは通常行ないません。

確かに、「段落」の中に「見出し」や「箇条書き」があるのは、文章の構造的におかしなものがありますし。

子要素として使って良いもの

「記述コンテンツ」に分類される要素。
例えば、<span> 要素や、<i> 要素、<strong> 要素など、かつては「インライン要素」と呼ばれていたものが中心になる。

親要素として使えるもの

フローコンテンツを受け入れるすべての要素。

許可されているARIAロール

すべて

DOMインターフェース

HTMLParagraphElement

属性

グローバル属性が指定できます。

サンプル

See the Pen P要素サンプル by Masahiko Iwakiri (@m-iwakiri) on CodePen.


 

アクセシビリティ上の考慮点として、「余白」を空ける目的で、空の <p> 要素を使うべきではありません。
読み上げソフトを使っている場合に、段落があることをアナウンスはするものの、読み上げるべきコンテンツがない、という状態になってしまい、読み上げソフトの利用者を混乱させる場合があるためです。

このサイトでは、HTML要素や属性の定義は下記サイトを参考にしています。
MDN Web Docs: https://developer.mozilla.org/ja/
W3C仕様の正確な定義、最新情報は上記サイトをご覧ください。
HTML要素や属性がどのブラウザに対応しているのかは、下記のサイトで確認できます。
Can I Use?: https://caniuse.com/#home

コメント

タイトルとURLをコピーしました