<p> 文章の段落を指定する

取り扱い 現行の標準
カテゴリ フロー・コンテンツ
パルパブル・コンテンツ
親にできる要素 フロー・コンテンツを受け入れる要素
子にできる要素 フレージング・コンテンツ
対応ブラウザ caniuseで確認

<p>タグの説明

<p>は、文章の中で段落として扱いたい箇所に使用します。「p」という名称は、英語で段落を表す「paragraph(パラグラフ)」の略です。

文章の中で最も基礎的な要素は、見出しと段落です。この二つの要素があれば、単純な構造の文章であれば問題なく成立します。そのため、HTMLを習得する上で早い段階で覚えておくべきタグと言えるでしょう。

段落は見た目を制御する目的ではなく、意味論的に一つのまとまりを定義するものです。単にブロックレベルで括りたい場合は、<div>を使用して下さい。

HTML5以降の環境では、セクショニングや文章構造の改善が進み、洗練された記述ができるようになりました。以前のように、適当に<div>で囲むのではなく、主要な内容がはっきりと分かるように段落付けを行いましょう。

多くの場合、段落は<article><section>に属します。この辺りのセクショニングの概念については、各要素で解説しています。

<p>タグの特徴

  • レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
  • 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
  • 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<p>に指定できる主な属性

グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。

<p>の使い方とサンプル

HTMLで文章をマークアップする祭の最も単純な構造です。以下の例では、見出しと段落を持つ記事を表しています。

HTML
<article>
	<h1>文章の見出し</h1>
	<p>主要な内容を表す段落。</p>
	<p>意味的にひとまとまりとみなせる範囲に適応します。</p>
</article>

例えば、段落の途中で改行したい場合、<br>を使いますが、乱用は避けて下さい。単純に隙間を空けたい場合はCSS(スタイルシート)で調整しましょう。

HTML
<article>
	<h1>文章の見出し</h1>
	<p>主要な内容を表す段落。</p>
	<p>
		意味的にひとまとまりとみなせる範囲に適応します。<br>
		一つの段落の中で何度も改行を行うのは不適切です。<br>
		特に連続で改行を記述することは避けて下さい。<br>
	</p>
	<p>改行が必要になったら、なるべく段落を分けましょう。</p>
</article>

続いて、もう少し複雑な例を見てみましょう。ここで注目して欲しいのは、コンテンツの主要な内容と関連する項目の意味付けの違いです。主要なコンテンツから外れた文章には、段落の格付けを与えていません。特にウェブサイトを制作する上で発生しがちな断片的な言葉や単語、コンテンツの文脈には直接関係のないフレーズや文字装飾は、対象から外してしまっても問題ないでしょう。

HTML
<article>
	<header>
		<h1>文章の見出し</h1>
		<div>
			<img src="#####.png" alt="アイキャッチ">
		</div>
	</header>

	<section>
		<h1>セクションの見出し</h1>
		<p>段落は意味的にひとまとまりとみなせる範囲に適応します。長文であっても、ひとまとまりの意味であれば段落を分ける必要はありません。文章に対するマークアップは、見た目ではなく文脈を意識してください。これはアクセシビリティや機械解釈の観点からも大切なことなのです。</p>
		<p>段落は意味的にひとまとまりとみなせる範囲に適応します。長文であっても、ひとまとまりの意味であれば段落を分ける必要はありません。文章に対するマークアップは、見た目ではなく文脈を意識してください。これはアクセシビリティや機械解釈の観点からも大切なことなのです。</p>
	</section>

	<section>
		<h1>セクションの見出し</h1>
		<p>段落は意味的にひとまとまりとみなせる範囲に適応します。</p>
		<p>段落は意味的にひとまとまりとみなせる範囲に適応します。</p>
		<p>段落は意味的にひとまとまりとみなせる範囲に適応します。</p>
	</section>

	<aside>
		<h2>余談の見出し</h2>
		<div>余談を表す内容。主要な文章ではない断片。</div>
		<div>スポンサードリンクや間接的な内容。</div>
	</aside>

	<address>
		著者名:XXXXX<br>
		Mail: info@mail.your_address.jp<br>
		URL: https://your_domainname.jp<br>
	<address>
</article>

<p>に関連するHTMLタグ

文書の構造を組み立てる要素
<article> 自己完結した記事であることを示す
<section> 文書構造におけるセクションを定義する
<aside> 本筋から分離しても問題のない余談や補足を表す
<nav> ページ上の主要なナビゲーションであることを表す
<header> セクションの先頭となるグループを表す
<footer> セクションのフッターを表す
<h1> 〜 <h6> 文書やセクションの見出しを表す
<p> 文章の段落を指定する