HTMLのpタグ（段落）とは？正しい使い方と改行タグとの違いを解説
ツイート
シェアHTMLで改行をする際によく使われるのが、pタグとbrタグです。
しかし、それぞれの持つ本来の役割を理解している人は、少ないのではないでしょうか。
両者は全く異なるものなので、その意味をしっかり理解して使い分けることが重要です。
本記事では、pタグとbrタグの違いから、正しい使い方などを紹介していきます。
ブログの執筆やホームページの文言を修正する際に、ぜひお役立てください。
htmlのpタグとは
pタグとは、英語で「段落」を意味する”paragraph”（パラグラフ）の頭文字を取った、HTMLのタグのことです。
段落が、文章のまとまりを区切ったものということはご存知だと思います。そして、それはWeb制作においても同じです。
<p>〜</p>というようにpタグに囲まれた範囲の文字が、その段落として画面上に表示されます。
pタグは、主にテキストを見やすくするために使われ、行間の調整にとても有効です。
pタグの詳しい使い方は、後ほど説明いたします。
HTMLでのpタグと改行（br）タグの違い
pタグは、文章に段落を付けて文章を読みやすくするものですが、それとよく似たタグに「brタグ」というものがあります。
brタグは「改行」を表すもので、pタグと混同されることが多いです。
ここでは、pタグとbrタグを適切に使うために、両者の違いを説明します。
段落と改行の違い
意外と間違いがちなのが、段落と改行の意味の違いです。
pタグ（段落）とbrタグ（改行）は、以下のように定義されます。
- pタグ（段落）：一つの主題を持った文章の切れ目のこと
- brタグ（改行）：一つの文章を途中で区切って行を新しくすること
brタグよりpタグがおすすめ
Webサイトを運営するうえで、brタグの多用はあまりおすすめしません。
それは、クローラーがコンテンツを把握しにくくなるからです。
クローラーとは、簡単に言うと、情報を探すロボットのようなものです。
Googleなどの検索エンジンは、「クローラー」を使って昼夜問わず世界中から情報を集めています。
そのため、Webページを制作する際はHTMLの構造をクローラーが理解しやすく記述することが大切です。
クローラーの巡回しやすさを意味する「クローラビリティ」を意識するなら、brタグよりもpタグで段落を整理したほうが良いとされています。
改行よりも段落で区切ることで、コンテンツの内容をクローラーに評価してもらいやすくなるからです。
また、brタグは強制的に改行を行うタグのため、デバイスによっては見た目にズレが生じてしまいます。
これらの理由から、brタグを多用するよりも、pタグを使用するほうがおすすめと言えるのです。
HTMLのpタグの記述方法
pタグは、以下のように<p>と</p>で文章を囲むように記述します。
<p>記述方法確認テスト</p>
基本的には装飾がない通常のテキストで表示されます。
一般的に、Webブラウザのpタグのデフォルトスタイルには文字の太さや線などの装飾はありません。
また、pタグはmarginにより段落間に余白を指定できます。
ただし、「もっと広い余白が欲しい」という理由で、以下のように空のpタグを連続して使用することはやめましょう。
<p></p>
<p></p>
<p></p>
<p></p>
<p>記述方法確認テスト</p>
このやり方では、画面上は広い余白を作ることができますが、検索エンジンから見ると何もない空の段落がたくさん並んでいると認識されてしまいます。
HTMLのpタグにCSSを適用する方法
pタグで段落を分ける際に、段落間の余白を見た目上で調整したい場合は、CSSを用いる方法が有効です。
例えば、以下のような形で余白を指定します。
p{
margin:0 0 2em; /*上 左右 下*/
}
CSSで使用する単位の1種で、「em」というものがあります。
emは文字の高さ分を“1em”としてサイズをカウントする単位のことです。
上記のCSSの記載では、下に2文字分の高さの余白を指定するという意味となります。
関連記事：HTMLのemタグとは？他の強調タグとの違いやSEO効果を解説
HTMLでpタグごとに余白を変更する方法
先程の例では、pタグのすべてにおいて、「下に2em分の余白」ができることになります。
pタグごとに余白の大きさを変えたいときは、CSSのクラスを使用しましょう。
何種類か余白用のCSSクラスをあらかじめ作っておき、場面に応じて使い分けをします。
CSS
.space-A{
margin:0 0 3.5em;
}
.space-B{
margin:0 0 2.4em;
}
.space-C{
margin:0 0 1.4em;
}
.space-D{
margin:0 0 .8em;
}
上記のように作っておけば、pタグに指定されるスタイルと合わせて5種類の余白を使い分けることが可能です。
以下のようにHTMLタグにCSSクラスを追加して使用します。
HTML
<p class="space-C">ここに本文のテキストを書きます</p>
上記の場合、space-Cクラスの設定通り、下に”1.4em”分の余白を指定することが可能です。
HTMLのpタグにCSSを適用してできるその他のこと
pタグにCSSを適用することで、余白を作る以外のこともできるようになります。
以下、CSSの主な適用例を紹介します。
pタグの行間
「line-height」プロパティを使い、150％か160％の行間指定が一般的です。
その他にも、pxやem、exなどの単位指定もできます。
p{
line-height:150%;
}
pタグの色
「color」プロパティを使用します。
「#333」などの黒系フォントカラー指定が一般的です。
p{
color:#333;
}
pタグの中央寄せ
「text-align」プロパティの値である「center」を指定することで、pタグの中央寄せが可能です。
p{
text-align:center;
}
WordPressでのpタグの扱い方
ブログやサイトを運営するうえで、多くの人がWordPressを使用されていると思いますが、WordPressでは投稿記事内に<p>タグが自動挿入されるのはご存じでしょうか。
これは、「自動整形表示」という、WordPressにデフォルトで備わっている機能です。
例えば、ブログ用の投稿記事を作成する際に段落機能を追加すると、自動でテキストを<p>～</p>と囲んでくれたり、段落内で改行をすると自動的に<br>を追加してくれたりします。
ただし、WordPressの「自動整形表示」機能には、注意しなければならない点もあります。
それは、CSSに自分で手を入れると表示崩れを起こしてしまうリスクがあることです。
ブログなどの投稿記事を、CSSで細かくスタイルを指定して作成すると、ソース内容やCSSのスタイルとぶつかってしまい、思わぬ表示崩れを招いてしまうことがあります。
上記のリスクを回避するためには、あらかじめ「自動整形表示」を無効化しておいてもいいでしょう。
「自動整形表示」を無効化する方法
「自動整形表示」を無効化するには、以下の2つの方法があります。
方法①：固定と投稿ページ共に自動挿入を停止する
とても簡単なやり方で、以下のコードをfunctions.phpにコピペすれば完了です。
add_action(‘init’, function() {
remove_filter(‘the_excerpt’, ‘wpautop’);
remove_filter(‘the_content’, ‘wpautop’);
});
add_filter(‘tiny_mce_before_init’, function($init) {
$init[‘wpautop’] = false;
$init[‘apply_source_formatting’] = ture;
return $init;
});
これで、固定と投稿ページの両方とも、pタグの自動挿入を停止することができます。
方法②：特定の投稿タイのpタグの自動挿入を停止させる
例えば、固定ページのみのpタグの自動挿入を停止させたい場合、以下のコードを先程と同様、functions.phpにコピペしましょう。
add_filter(‘the_content’, ‘wpautop_filter’, 9);
function wpautop_filter($content) {
global $post;
$remove_filter = false;
$arr_types = array(‘page’);
$post_type = get_post_type( $post->ID );
if (in_array($post_type, $arr_types)) $remove_filter = true;
if ( $remove_filter ) {
remove_filter(‘the_content’, ‘wpautop’);
remove_filter(‘the_excerpt’, ‘wpautop’);
}
return $content;
}
これで、「固定ページのみ」のpタグの自動挿入を停止することができます。
まとめ
本記事で紹介したポイントを以下にまとめています。
- pタグは文章に段落を付けて読みやすくするためのHTMLタグ
- pタグは改行目的でなく、段落をまとめるために使う
- brタグは「改行」するためのHTMLタグ
- brタグを使用するとクローラーに検知されにくいためSEO効果が薄れる
- 段落間の余白などはCSSで指定する
- WordPressでCSSを利用する際は、自動整形表示を停止する
pタグとは何か、その用途や注意点などを説明してきました。
Web制作初心者がすべてを一気に理解するのは難しいと思いますが、ぜひ本記事を参考にしていただき、日々のWeb制作にお役立ていただければ幸いです。
- SEO対策でビジネスを加速させる「SEO Dash! byGMO」
-
SEO対策でこんな思い込みしていませんか？
- 大きいキーワードボリュームが取れないと売上が上がらない・・
- コンサルに頼んでもなかなか改善しない
- SEOはコンテンツさえ良ければ上がる
大事なのは自社にあったビジネス設計です。 御社の課題解決に直結するSEO施策をご提案します
- プロフィール
-
-
GMO TECH株式会社
- 2012年より一貫して検索エンジン領域のコンサルティング業務に従事。 2017年にGMO TECH社に参画。営業組織の構築、新商材開発、マーケティング部門立ち上げをおこなう。 現在、MEOコンサルティング、SEOコンサルティング、運用型広告などSEM領域全体を統括し、 お客様の期待を超える価値提供を行うため日々、組織運営・グロースに奔走している。
-
GMO TECH株式会社
