ｐタグとは

ブロックレベル要素（コンテンツをまとめる箱のような使い方をする要素）

paragraph（パラグラフ＝段落）のことを指しています。

 ひとつの段落であることを表すため、文章の途中で次の<p>に移ることは基本的にはしません。

NG例

<p>これは</p>

<p>例文</p>

<p>です。</p>

文章を一つのまとまりにするためには以下のように文章を区切ります。

また、途中で改行を入れたいときには<br>を入れましょう。

ＯＫ例

<p>これは<br>例文<br>です。</p>

 

また、文章をpタグで囲わないのもSEOで不利になります。

文章をしっかりpタグで囲うことによってSEＯに反映されるようになるので

必ず文章はpタグで囲いましょう！

 

ｐタグの使い方

ｐタグの使い方を間違えるとＳＥＯに不利になることもあります。

間違えて覚えている場合も実はあります。確認していきましょう

 

ｐタグにいれられるもの

ｐタグはブロック要素なので、インライン要素に入れないように注意しましょう。

ｐタグの中に入れられるものは以下の通りです

NG例

<i><p>これは例文です。</p></i>

インライン要素の中にブロック要素があるのでNGです。

ＯＫ例

<p><i>これは例文です。</i></p>

文章だけでなく画像にも使えるけど…注意！

ブログやニュースの記事などで、文章の流れの中で画像を使うときには<p>の中に<img>を入れるようにしましょう。

画像には「いつでも<p>を使うべき」というわけではありません。<div>や<figure>などにも画像を入れることもできます。ざっくりとした使い分け方は以下のようになります。

 

タグ	いつ使うか
＜ｐ＞	画像が記事を構成する一部の場合。文章の流れ的に画像がそこに無いといけない場合
＜figure＞	画像を別の場所に移しても、本文の意味が成り立つ場合（キャプション付きの図表など）
＜div＞	装飾のため、見栄えのために画像を使うと

 

注意一覧

pタグはブロックレベル要素です。ブロック要素ではありません。

pタグの中にブロック要素を入れるとpタグがその時点で閉じるようになっているのでhtmlが崩れてcssが効かない、SEOに不利になったなどが起きるため、以下のことを注意していきましょう。

 

なんでもpタグにしない

pタグはあくまでも「段落」を表すタグで、ほかに最適なタグがないか調べましょう。

例えば

<p>お問い合わせ先</p> <p>電話番号：0120-123-456</p>

よりよいのは

<h1>お問い合わせ先</h1> <address>電話番号：0120-123-456</address>

などほかのタグが使える可能性があります。（この時インライン要素をタグにしないように注意しましょう！）

いろんなタグを検討してみてください！

 

pタグの中にリストを入れない

pタグはブロックレベル要素なのでリストなどは使えません。

NG

<p>私が好きな果物は <ul> <li>りんご</li> <li>みかん</li> </ul> です。 </p>

OK

<p>私が好きな果物は、次の2つです。</p> <ul> <li>りんご</li> <li>みかん</li> </ul>

 

文章の間にリストは使えません。注意しましょう。

このような状況でどうしてもリストを使いたい場合は<div>を使いましょう。

空のｐタグを使わない

pタグを空にするとSEO上「文章を書きます、と言っているのに文章が無いのでこれはよくないWEBサイトだから、評価を下げます」と理解します。

行間を開けたい場合はcssで調節、または<br>を中に入れて改行をするなどしましょう。

改行の注意

冒頭でも触れましたが、pタグの中の改行は<br>です。

・<p>例文</p><p>です。</p>

・<p>例文<br>です。</p>

どちらも見た目は

例文

です。

になりますが、正しいのは<br>を使ったほうです。文章の区切りに注意しましょう。

 

また、以下のような<br>の使い方はやめましょう！

<p>例文</p><br><br><br><br><br><p>です。</p>

間をあけたいという理由でこのような<br>を書くのはNGです。

SEO上マイナスになるので行わないでください。

 

まとめ

調べてみると結構シンプルですが奥深いpタグでした。

pタグをつけないで文章を書いてしまったり、ブロック要素を入れてしまったりするとSEO上のダメージが大きい分全員で気を付けていきたいと思います。

そのほかにもpタグでこんなミスがあったよなどあったらコメントお願いいたします☺