<p>:文章の段落を指定する要素・HTMLタグの解説

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

<p>タグの解説

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

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

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

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

多くの場合、段落は<article><section>または<main>の中に属し、見出しの後に続いていくつか連続して並びます。

<p>タグの特徴

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

<p>要素に指定できる属性

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

<p>要素の使い方とサンプルコード

この要素の最も基本的な書き方は以下の通りです。文章の中でひとつの段落としてまとまりを示したい場合に用います。短いコピーや機能の名称を表す断片的なテキストの場合は、<div>などの要素を採用して下さい。


<body>
	<p>段落を表すテキスト。段落を表すテキスト。</p>
	<p>段落を表すテキスト。段落を表すテキスト。</p>
	<p>段落を表すテキスト。段落を表すテキスト。</p>
</body>

見出しを持つ独立した記事であれば、次のように書くことができます。


<article>
	<h1>文章の見出し</h1>
	<p>段落を表すテキスト。段落を表すテキスト。</p>
	<p>段落を表すテキスト。段落を表すテキスト。</p>
	<p>段落を表すテキスト。段落を表すテキスト。</p>
</article>

段落の途中で改行したい場合は<br>を使いますが、乱用は避けて下さい。縦書きの書籍を見れば分かるように、段落の中の文字列は改行されずに一連なりで配置されています。段落を閉じて新たな段落を始めるのは、ひとつの話題が終わり次の発言に移るタイミングです。レイアウト目的で隙間を空けたい場合はCSS(スタイルシート)で調整しましょう。


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

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


<article>
	<header>
		<h1>文章の見出し</h1>
		<figure class="post-image">
			<img src="/images/file" width="800px" height="420px">
			<figcaption>©picture copyright.</figcaption>
		</figure>
	</header>

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

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

	<aside>
		<h3>余談や関連リンクなど</h3>
		<div><a href="#">カテゴリー名</a></div>
		<div><a href="#">タグ名</a></div>
		<div><a href="#">スポンサードリンクなど</a></div>
	</aside>

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

<p>に関連するHTMLタグ

文字列に意味を与える要素
<h1> 〜 <h6> 文書やセクションの見出しを表す
<p> 文章の段落を指定する
<abbr> 略語であることを表す
<address> 連絡先(問い合わせ先)として扱う
<blockquote> 複数行に渡る比較的長い引用分を表す
<cite> 出典先や参照先の題名を表す
<code> プログラムやスクリプトの断片を表す
<data> 文字列に機械的な識別情報を与える
<del> 文書の中で編集によって削除された範囲を表す
<dfn> 定義用語として扱う
<em> 意味を強調する
<hgroup> 見出しに付随する副題やキャッチフレーズをグループ化する
<hr> 段落に区切りを与えて水平線(罫線)を引く
<i> 文章の中で慣用句や特定の用語を表す
<ins> 文章が編集されて新たに追加された部分を表す
<kbd> キーボード入力される文字であることを示す
<q> 行に収まる程度の短い引用を表す
<s> 正確ではなくなった内容であることを表す
<samp> プログラムによる出力結果のサンプルとして扱う
<small> 細則のような付帯注釈を表す
<strong> 重要な情報として扱う
<time> 時刻や日付を正確に表す
<u> 非言語的な注釈があることを示して下線(アンダーライン)を引く
<var> 変数や引数として扱う