Pタグとは～段落を使ってHTMLをわかりやすくする3つのコツ

PタグでHTMLマークアップし、段落を使った見やすいページにしながら、サイト構築する方法があります。

今回は、WordpressのPタグ、Pタグの行間、Pタグと改行について中心に解説したいと思います。

Pタグとは

Pタグとは、Paragraphの略で、「段落」を意味するHTMLタグのことです。

Pタグは、＜p＞～＜/p＞でマークアップすることで、段落を作ることができます。

記述例：

Pタグは、主にテキスト文章を見やすくするために使われ、行間の調整に有効です。

WordPressのPタグ

サイト構築できるCMSで最も有名なWordpressのPタグについて、以下のようなケースと対処法があるようです。

WordPressで勝手に入る（自動挿入される）Pタグを削除（除去）する方法が、以下サイトで紹介されてます。

• wordpressに自動挿入されるPタグを削除する3つの方法
  wordpressには皆さんのご存知の通り、Enterキーで改行すると自動的にpタグを挿入されます。
  この自動的にpタグを入れてくれる機能は単純に文章を書くだけなら良いかもしれませんがwordpressにwebデザインを反映させようと思うと邪魔になる時があります。
  初心者にとっては便利な機能でも、中級者・上級者ともなると何とかしたいですよね。

また、WordpressでPタグ・BRタグが消える件について、以下サイトで紹介されてます。

• 【絶対解決】記事投稿時にテキストエディタでpタグ、brタグが消える
  ワードプレスでブログを書いていると、何かの拍子にpタグやbrタグがwysiwygの投稿画面から消えますよね。。。

Pタグと改行について

Pタグと改行（BRタグ）は、意味や仕様が異なります。

Pタグは、段落を作るときに使用し、BRタグで文章を改行します。

HTMLでのマークアップ例：

ブラウザでの表示例：

上記のよう、基本的に長い文章の中で「物事の切れ目」や「一区切り」ごとにpタグで段落付けします。
brタグをうまく使い、読みやすさなどの文章パフォーマンスをより高めることが可能です。

PタグにCSSを適用する

PタグにCSSを適用するときに、利用頻度が高めなパターンは以下のようになります。

• Pタグの行間
• Pタグのマージン（余白）
• Pタグの色
• Pタグの中央寄せ

Pタグの行間

「line-height」プロパティを使い、150％か160％の行間指定が一般的となります。
その他、pxやemやexなどの単位指定もできます。

記述例：

Pタグのマージン（余白）

「margin」プロパティを使い、左右上下の余白が調整できます。

記述例：

また、デフォルトでPタグに上下左右などマージン（余白）が入ってる場合、以下のよう「margin:0;」を指定することで回避できます。

記述例：

Pタグの色

「color」プロパティで、「#333」などの黒系フォントカラー指定が一般的です。

記述例：

Pタグの中央寄せ

「text-align」プロパティの値である「center」を指定することで中央寄せができます。

記述例：

Pタグの入れ子について

「＜li＞タグの中に＜p＞タグ」「＜p＞タグの中に＜p＞タグ」といったPタグの入れ子について、以下解説します。
※参考：【HTML】 もう悩まない！タグの入れ子ルールまとめ

• ＜li＞タグの中に＜p＞タグ
• ＜p＞タグの中に＜p＞タグ

＜li＞タグの中に＜p＞タグ

以下のよう、liタグの中にpタグやdivタグなどのブロックレベル要素を入れたりすることが可能です。

記述例：

＜p＞タグの中に＜p＞タグ

以下のよう、pタグの中にpタグは入れることができません。
pタグの中に入れていいのは、「aタグ」「imgタグ」「spanタグ」「strongタグ」「emタグ」といったインライン要素のみです。

記述例：

HTML5でのPタグの使い方

HTML4.01からHTML5へのバージョンアップにより、Pタグの使い方として、以下のようなポイントを抑えましょう。
※参考：＜p＞－HTML5タグリファレンス

• align属性が廃止
  HTML5では、p要素のalign属性は廃止されています。 揃え位置の指定にはCSSを使用する
• 追加された新しい要素を使う
  Pタグの段落よりも適切な場合は、＜article＞＜aside＞＜nav＞＜section＞ などの新しい要素を活用する

まとめ

Pタグで適切にマークアップし、ユーザービリティを高めましょう。

見やすく・認識しやすいコンテンツにし、サイト価値を高めながら、SEO対策で順位上昇を目指すことが重要です。