pタグとは？意味と使い方について徹底解説！

Web制作において、htmlへの理解は非常に重要です。最低限の知識を押さえておかないと求めるサイトを作ることは難しいでしょう。

ここでは、htmlのpタグについて、pタグとは何なのか、使い方や注意点、似たタグとの違いについて解説していきます。Web制作初心者の方はもちろん、これまでWeb制作に携わってきた方もここで一度復習しておきましょう。

pタグとは？

pタグとは、段落を意味するhtmlのタグのことで、<p>~</p>で囲まれた範囲がその段落として表示されます。
一般的に、段落は文章のまとまりを区切ったもののことです。Web制作においてもこれは変わりません。

pタグの読み方は?

pタグは「ピータグ」と読みます。もともと英語の「paragraph（パラグラフ）」に由来し、その頭文字を取ってpタグと示されています。

pタグの使い方

pタグは「<p>~</p>」を記述し、コンテンツを囲うようにして使用します。

実際に使用例を見てみましょう。

使用例

pタグで囲われている要素は全て段落の中に含まれます。

また、膨大な量のテキストが並んでいると少々見づらいことでしょう。
pタグを使用するときは、brタグという改行を表現するタグを使う必要があります。

使用例

brタグを使わずに書かれた文章は、読みづらいコンテンツになってしまいます。
Webでテキストを読んでいるユーザーの多くは自分が必要だと思う箇所だけ読み、不要だと思うと読み飛ばしてしまいます。また、コンテンツが読みづらいことで、サイトから離脱してしまう可能性も高まります。

そのため、上記のように改行を用いることは、
ユーザーのことを考えたWebページを作成する上で間違いなく必要になってくるテクニックになります。

5行を超えるような文章は、brタグで改行を行うことで読みやすくなるでしょう。

このようにpタグ（段落）とbrタグ（改行）の使い分けは、見やすさの観点から非常に重要です。
文章のまとまりがどこなのかをよく考えて、コンテンツを作成するようにしましょう。

こんなときはどうすればいいの？～pタグの使い方でよくある疑問～

pタグを使う上で、いくつかのルールが存在します。
ここで紹介するルールを今一度確認していただき、pタグを正しく活用していただければと思います。

pタグの中に追加できるタグ、できないタグ（入れ子ルール）

pタグは<p>~</p>で囲みますが、この中に追加できるタグと追加できないタグが存在します。このようなルールのことを「入れ子ルール」と呼びます。

pタグの中に追加できるタグは以下になります。

また、pタグを入れ子として追加できるタグは以下になります。

これらを誤って使用すると、コンピュータが情報の整理ができなかったり、デザイン的に不自然な形で表示されるなど、伝えたいことが思うように伝えられないことになるので注意しましょう。
使用しているうちに「これは合っているのか？」と迷うことがあれば、必ずタグの意味を調べることをおすすめします。

pタグの中にpタグを入れてもいいの？

ルールとして、pタグの中にpタグを入れることはできません。仮に入れてみると、次のようになります。

↓

このように2つ目のpタグの直前に、最初に記述したpタグの閉じタグが生成され、2つ目のpタグの直後に新たなpタグが記述されるようになります。
つまり、「pタグの閉じタグ漏れ」としてpタグが自動的に生成されてしまうのです。
これは本来のpタグの使用方法とは異なるので注意しましょう。

ワードプレスでpタグが自動的に変換されてしまうのを防ぐには？

ワードプレスでは、固定ページや投稿ページを作成する際に、2行以上の改行はpタグに変換されるという「auto paragraph」という機能があります。一見便利な機能ですが、勝手に変換されてしまうため不便に思う方もいるでしょう。

この機能を無効化するには、functions.phpやテンプレートファイルにプログラムを追加する必要があります。どのようなプログラムかはここでは省略しますが、やり方によっては可能だということは覚えておきましょう。

似たタグとの使い分け

pタグと似たタグとしてbrタグが挙げられます。
前述した通り、brタグは改行するためのタグですが、pタグで改行を行ってしまう方も多々います。しかし、htmlのタグが意味する内容が根本的に異なります。

pタグは文章のまとまりごとで区切る段落なのに対し、brタグは文章を整えるために行う改行になります。
本来は改行するべきところを段落で区切ってしまうことは、Googleのクローラーが文章のまとまりを正しく認識できません。
これにより、サイトが正しく評価されずSEO観点からも悪い影響を及ぼす可能性があります。

「ここで使うべきはpタグ（段落）か？brタグ（改行）か？」をよく考えて使い分けるようにしていきましょう。

空のpタグはよくないの？

改行を目的として、pタグの中に何も入れない「空のpタグ」が使用されているページを見かけることがあります。
本来は「文章のまとまり」としてあるべき内容がないわけですから、当然良いとは言えません。
brタグを用いて改行を行ったり、余白を多く取りたい場合などは、スタイルを変更するようにしましょう。

まとめ

pタグとは何か、使い方や注意点などを解説してきました。特にbrタグとの使い分けやワードプレスでのpタグの変換、空のpタグについて、Web制作初心者の方は迷ってしまうこともあるでしょう。ぜひこのページを参考にして、日々のWeb制作にお役立てください。

また「どうすればいいのか分からない」「自分で作成するのは難しい」など、Webサイト制作でお悩みの方はお気軽にご相談ください。