Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】p要素の使い方

p要素の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

p要素は、HTMLドキュメント内で段落を表すための要素です。Webページ上の文章コンテンツを構造化する際に非常に重要な役割を果たします。具体的には、テキストのまとまりを独立した段落として定義し、その内容が特定のテーマやアイデアに関連するひとつの単位であることを示します。これにより、文書のセマンティクス(意味合い)が明確になり、人間が内容を理解しやすくなるだけでなく、検索エンジンやスクリーンリーダーなどのプログラムがコンテンツの構造を正確に解釈できるようになります。

この要素は主にフローコンテンツを子要素として持ちます。つまり、画像やリンク、インライン要素などを含むテキストを格納できますが、他のブロックレベル要素(例えば、divh1ulなど)を直接子要素として持つことはできません。複数の段落を記述する場合は、それぞれの段落を個別のp要素で囲む必要があります。これにより、各段落が論理的に区切られ、コードの可読性も向上します。

p要素を適切に利用することは、Webページのアクセシビリティ向上にも貢献します。スクリーンリーダーは、p要素を段落の区切りとして認識し、ユーザーに適切なタイミングでポーズを与えながらコンテンツを読み上げることができます。また、ブラウザはデフォルトでp要素の上下に余白を適用することが多いため、CSSでスタイルを調整せずとも、視覚的に読みやすいレイアウトを構築する上での基盤となります。Webコンテンツを作成する上で、テキスト情報を整理し、意味的な構造を与えるための基本的な要素として広く利用されています。

公式リファレンス: <p>: The Paragraph element

構文(syntax)

1<p>これは段落のテキストです。</p>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ