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

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

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

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

この記事でお話すること

p要素とは?
p要素のデフォルトスタイルは?
p要素の使い方
p要素とdiv要素の違い
格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

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

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

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

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

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

p要素の評価

頻出度

(5.0)

重要度

(5.0)

総合評価

(5.0)

1.p要素とは?

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

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

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

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

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

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要素で段落付けします。

あとは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を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

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

リンク

5.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント