[SEOに重要!?] pタグの意味は? divタグとの違い・デフォルトスタイルも分かりやすく解説!

p要素について知りたい人

p要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること
  • p要素とは?
  • p要素のデフォルトスタイルは?
  • p要素の使い方
  • p要素とdiv要素の違い

p要素はparagraphの略で段落を意味します。

p要素を使うことで、その文章はひとかたまりであると表現できます。

p要素を終了した時点で自動的に改行されます。

そこでこの記事ではp要素について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

p要素の評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)

1.p要素とは?

p要素は、段落を指定するためのタグです。

p要素の「p」は「paragraph」の略です。

<p>~</p>で囲まれたテキストは1つの段落であることを示します。

p要素の使用頻度は高く、最も使われるHTMLタグの一つと言えるでしょう。

テキスト以外にも、画像で表されたテキストも一つの段落といえるため、これらも<p>タグで囲むのが一般的です。

p要素は、Webページ内で最も多く使われています。

そのため、正しく使用すればWebページのコンテンツを検索エンジンに正確に伝える事ができ、結果としてSEO評価に影響します。




2.p要素のデフォルトスタイルは?

p要素のデフォルトスタイルはどのようになってるのでしょうか?

p要素の上下には1文字分の間隔ができます。

p要素は具体的にどのようなCSSが適用されているのでしょうか?

p {
 display: block;
 margin-top: 1em;
 margin-bottom: 1em;
 margin-left: 0;
 margin-right: 0;
}




3.p要素の使い方

それではp要素の使い方をみていきましょう。

・・・

<body>
 <h1>h1見出し</h1>
 <p>リード文</p>
 <h2>h2見出し</h2>
 <p>本文</p>
 <h2>h2見出し</h2>
 <p>本文</p>
</body>

・・・

p要素は上記のように段落にしたい文章の固まりを<p> 〜 </p>で囲んでいます。

基本的に長い文章の中で物事の切れ目や一区切り事にp要素で段落付けします。

あとはbrタグをうまく使って、読みやすさなどの文章を構築するようにしましょう。

p要素で適切にマークアップし、ユーザービリティを高め、Webサイトの価値を高めながら、SEO対策で検索順位の上昇を目指していきましょう。

非常によく使う要素の1つですので是非覚えておきましょう。




4.p要素とdiv要素の違い

htmlでマークアップしているとp要素とdiv要素どちらを使えばいいか迷うこともあるかと思います。

そこで少しわかりにくいp要素とdiv要素の違いをお話していきます。

どちらもブロック要素ですが、p要素はparagraphの略で段落を指定する時に使います。

p要素は前後に余白ができるようになっているため、CSSで指定しなければ行間が開きます。

一方、div要素はdivisionの略でWebページ内にブロックを作りたい時に使います。

div要素はp要素と違って間に空白ができません。

自分でCSSを適用させたい場合、div要素を使いましょう。

 

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

 

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?