【HTML5】pタグの基本的な使い方やspanタグとの違いを解説

HTMLの基本中の基本、pタグについて解説します！

pタグとは？

pタグとは、段落を指定するためのタグになります。

pはParagraphの略であり、翻訳するとそのまま「段落」という意味ですね。

主にWebページに文章を表示させる際、段落としてマークアップする時に使用します。

pタグの使い方

それでは、実際にpタグの使い方を見てみましょう。

See the Pen pタグについて by spiqa design (@spiqa_design) on CodePen.

基本的には段落や句点(。)ごとにテキストをpタグで囲みますが、文章の内容によってはグルーピングの仕方を変えることもあります。

ブラウザのデフォルトCSSにより、pタグの上下にはmargin(余白)が入るようになっており、読みやすくなっています。

brの連打で余白を作るのは好ましくない

たまに長い文章を1つのpタグ内にまとめて、文章間の余白はbrタグ(改行するためのタグ)を連続で使って空けているWebページを見かけます。

しかし、このような記述では以下のようなデメリットがあります。

• ブラウザごとに表示が異なる可能性がある
• ブラウザの読み上げ機能で一気に読み上げてしまう

pタグで正しくグルーピングすれば、ブラウザごとの表示はほぼ変わりません。

また、読み上げ機能でもグルーピングしたpタグごとに一息おいて読み上げてくれるようになります。

pタグとspanタグの違いは？

HTML/CSS初学者の方が疑問に思うこととして多いのが、pタグとspanタグの違いです。

一見、どちらも文章を囲むためのタグなので、最初は何が違うのかわかりづらいですね。

実はpタグとspanタグは全く異なるタグになります！

HTMLとしての役割が違う

前述した通り、pタグには段落を指定するという役割があります。

spanタグは文章内の微調整をするため(一部だけ文字色を変えるなど)の汎用的なタグになり、spanタグ自体に明確な役割はありません。

• pタグ→段落を指定するためのタグ
• spanタグ→文章内の微調整をするためのタグ

ブロックレベル要素とインライン要素の違い

pタグはブロックレベル要素ですが、spanタグはインライン要素になります。

要素のタイプの違いについては別の記事で詳しく解説していますので、下記記事をご覧ください。

ブロックレベル要素とインライン要素についての記事はこちら

HTML5

2021.05.12

【HTML5】pタグの基本的な使い方やspanタグとの違いを解説

HTMLの基本中の基本、pタグについて解説します！ pタグとは？ pタグとは、段落を指定するためのタグになります。 pはParagraphの略であり、翻訳すると…

まとめ

• pタグは段落を指定するためのタグ
• brタグで余白を作るのではなく、pタグで段落ごとに文章をグルーピングすることが好ましい
• pタグとspanタグはHTMLとしての役割や要素のタイプが異なる

以上、pタグについての解説でした。

pタグを正しく使用して、誰にでも見やすく使いやすいWebサイトを制作しましょう。

こちらの記事もおすすめ

HTML5

2021.05.12

【HTML5】pタグの基本的な使い方やspanタグとの違いを解説

HTMLの基本中の基本、pタグについて解説します！ pタグとは？ pタグとは、段落を指定するためのタグになります。 pはParagraphの略であり、翻訳すると…