ご相談・お問い合わせ
サイトエンジン株式会社
平日 9:00-18:00

pタグとは?しっかり使いこなしてWeb制作に生かそう

2021.09.06
この記事の著者
小田紫花
小田紫花
記事一覧

こんにちは、サイトエンジンの小田です。

みなさんはhtmlをご存知でしょうか?Webページを作成するための言語のことです。タグによって見出しや画像の表示などを指定しています。今回はhtmlタグの中でもpタグについて、使い方などを解説します。

 pタグってそもそも何?

pタグは先述した通りhtmlタグの1つで、「ピータグ」と読みます。「p」は「Paragraph」という単語からきていて、pタグは文字通り段落を指定するタグです。使用する際は<p>、</p>というふうに表記し、<p>〜</p>で囲まれた部分が1つの段落となります。

pタグの使い方

例えば、以下の文章があるとします。

「名詞には、一般名詞と固有名詞という種類分けがあります。一般名詞、また普通名詞というのは、そのカテゴリーに含まれるもの全てを指すときに使用される名詞のことです。例えば、「動物」や「テレビ」、「漫画」などは何か一つのものを指すのではなく、そのジャンルに含まれるもの全体を指しています。」

この文章を1つの段落とする場合、htmlでは以下のように記します。

<p>名詞には、一般名詞と固有名詞という種類分けがあります。一般名詞、また普通名詞というのは、そのカテゴリーに含まれるもの全てを指すときに使用される名詞のことです。例えば、「動物」や「テレビ」、「漫画」などは何か一つのものを指すのではなく、そのジャンルに含まれるもの全体を指しています。</p>

このように、htmlでは段落の始めと終わりにそれぞれ<p>、</p>をおきます。段落内部で改行をしたい場合は、改行をしたい部分にbrタグ(<br>)を入れます。ちなみに、brタグは「Break」から来ていて、改行を行うためのタグです。あまりにも<p>〜</p>の1段落の文章が多いとユーザーにとって読みにくい文章になってしまうため、段落内が5行以上になってしまうような場合は、基本的にはbrタグなどを使用し、改行することが多いでしょう。

pタグを使う時の注意

先ほど、改行の際は<br>というタグを使用すると記載しましたが、<p>〜</p>の間には入れても良いタグと入れてはいけないタグがあります。この入れることができるタグと入れられないタグのルールを入れ子ルールと呼びます。入れてはいけないタグを入れると、せっかく組んだhtmlがうまくデザインに反映されないので、タグを使う前にはしっかり調べ、<p>〜</p>の間に入れても問題ないかを確認してから使用してください。ちなみに、pタグに入れることができるタグにはaタグ、emタグ、bタグなどがあります。

また、たまにあるのがpタグのとじ忘れです。先頭に<p>をつけた文章は、必ずどこかで</p>によって締められます。段落がうまくhtmlに反映されない場合、もしかしたら</p>をつけ忘れているかもしれません。必ず<p>〜</p>のセットになっているか確認してみましょう。

さらに、改行をしたい際に<br>を使わず、pタグで区切りなおしてしまう方も多いでしょう。たしかにpタグで区切り直すことによって改行はされますが、pタグで改行をしてしまうと、1段落の文章のまとまりが崩れてしまい、Googleが正しく認識できなくなってしまいます。その結果、SEOの効果にも悪影響を及ぼしかねません。改行をしたい時にpタグを使用するのはやめましょう。

いかがでしたか?pタグは、htmlを組む際におそらく最も目にするタグの1つではないかと思います。この機会にpタグについて覚え、Web制作に役立ててみましょう。

著者プロフィール
小田紫花
小田紫花

サイトエンジン株式会社でディレクターをしています。日々マーケティングの勉強に励んでいます。よろしくお願いいたします。

資料請求はこちらから

かくたまのコンテンツマーケティング支援サービスについて、
詳しく掲載された資料を今すぐ無料ダウンロード!

こんな方にオススメです
  • 料金を知りたい
  • 成功事例を知りたい
  • 社内での提案で資料が必要
page top