SEOに関する実験やデータ分析などを公開します

SEOの疑問を実験で解明しブログ配信【SEOラボ】

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

pタグとは、Paragraphの略で「段落」を意味するHTMLタグのことです。このpタグを使えば、行間が調整できるのでテキスト文章が見やすくなります。
また、検索エンジンが段落であることを認識しやすくなります。

一方、pタグでマークアップしなければ、ユーザビリティやクローラビリティが向上しないでしょう。

今回は、pタグの意味や、段落を使ってHTMLをわかりやすくする3つのコツなど中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。

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

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タグと改行について

pタグと改行(brタグ)は、意味や仕様が異なります。

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

HTMLでのマークアップ例:

ブラウザでの表示例:

ホームページの順位を上げるためにSEO対策が必要です。

SEO対策とは、GoogleやYahooなどの検索エンジンでより多くサイト表示させるために、
ホームページを上位表示させる対策のことです。

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

pタグにCSSを適用する

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

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>タグ

以下のよう、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対策で順位上昇を目指すことが重要です。

SEO対策しても検索順位が上がらない…なぜ?

検索順位の推移

SEO対策しても検索順位が上がらない…なぜ?

検索順位が上がらない理由は、SEO対策の質が低いからです。

例えば、ユーザーの検索意図を無視したり、関連性の低いコンテンツを増やす、内部リンクの最適化など疎かにします。
この場合、SEO対策の質が下がります。
そうなれば、ページやサイト自体の品質が上がらないので、Googleに評価されづらくなります。
結果、検索順位が上がらないというわけです。

こうした悪い状況を回避する為に、サイトの欠点を調査して上位化に必要な対策をご案内します(無料)。

検索順位を上げたり、検索流入を増やすにはSEOが重要!

SEO対策無料ご提案はこちら