
SEO
更新日: 2024/11/22
【イラスト付き】pタグとは?brタグとの違いと書き方、活用方法を解説!

よし、できた!
イエローちゃん、何してるの?


あっ、ブルーちゃん!実は今、私のブログの記事を書いてるところだったんだ

せっかくだからちょっと読んでみて!
どれどれ……

……うーん、もっとpタグを有効活用した方がいいんじゃないかな?


pタグって?
よし、じゃあ今日はpタグの役割や使い方、SEOへの影響について解説していくね!

pタグとは?


pタグとは、「段落」を指定するために用いられるHTMLタグのことだよ

「p」は英語で段落を意味するParagraphの頭文字から取られているんだ

pタグを適切に使いこなすことで、ユーザーにとってより読みやすくわかりやすいコンテンツを作成することができるよ
pタグの使い方は?


pタグは、文章の段落などの、ひとまとまりにしたいテキストを囲む形で使用するよ
<p>これは第一段落のテキストです。</p>
<p>これは第二段落のテキストです。</p>

こうやって記載すれば、自動的にテキストを段落分けして、前後に改行を加えた形で表示してくれるんだ
pタグとbrタグの違いって?


pタグとよく似たHTMLタグに、改行をしたい時に使うbrタグがあるんだ

「br」は英語で改行を意味する「Line break」の「break」から取られているよ

どちらも改行を行うタグだけど、brタグはpタグとは違ってテキストを囲んだりはしないで、改行したい位置に単独で記載するんだ
これは一行目のテキストです。<br>
これは二行目のテキストです。

pタグは文章のまとまりを作るタグ、brタグは文章の途中で改行したい時に使うタグで、それぞれ異なった役割があるよ
pタグとbrタグ、どちらを使うべき?

さっきイエローちゃんが書いていたブログは、改行にbrタグを使っていたよね?
うん、brタグは改行したい部分に って書くだけで簡単だから、そうしてたけど……


実は、改行をする時はできるだけbrタグではなくpタグを使うべきと言われているんだ

それに、むやみにbrタグを多用することはより良いサイトを作る上であまりオススメできないよ
そうなの? pタグとbrタグで見た目はそんなに変わらなそうだし、改行をいっぱいした方が読みやすい文書になりそうだけど……


じゃあ、ここからはbrタグを多用すべきではない理由を説明していくね
brタグを多用すべきでない理由1:SEO評価に悪影響がある

実は、brタグはHTMLの構造上非推奨とされているタグなんだ

だから、あまりに多用しすぎたり、行間を作るために連続で記載したりすると、SEO評価が下がってしまう恐れがあるよ

SEOを重視したサイトでは、どうしても文章の途中で改行したい場合以外はなるべくbrタグを使わない方が賢明だよ
brタグを多用すべきでない理由2:PC・スマホで見た目が変わってしまう

brタグを使った改行が多すぎると、PCで確認した時は見栄えが良くても、スマホでは読みづらいテキストになってしまう可能性があるよ

PCとスマホでは画面の横幅の関係上、一行の文字数に違いがあるから、PCでの表示に合わせて頻繁に改行をすると、スマホで表示した時にはガタガタの見た目になってしまうことがあるんだ

スマホでインターネットを見る人はこれからもどんどん増えていくだろうから、あらゆる端末で不便なくテキストを読めるように、改行は最低限に抑えたほうがよりユーザーに優しいサイトになるよ
pタグを使った読みやすいテキストの書き方を解説!

ここまで説明してきたことを踏まえて、イエローちゃんが書いていたブログのコードを見てみよう
こんにちは、イエローです!<br>
<br>
私は今、マーケティングを勉強しています。<br>
特に、インフルエンサーマーケティングやSNSマーケティングに関心があります。<br>
<br>
よろしくお願いします!
確かに、体裁を整えるために連続でbrタグを使ったり、短い一文ごとにbrタグを使ったりしているところが気になるね


その通り!だから、このように修正すると良いよ
<p>こんにちは、イエローです!</p>
<p>私は今、マーケティングを勉強しています。特に、インフルエンサーマーケティングやSNSマーケティングに関心があります。</p>
<p>よろしくお願いします!</p>
わあ!凄くスッキリしたブログになったね!

まとめ

pタグについて、今日話した重要なポイントをまとめるね
まとめ
◆pタグは段落を作るためのタグ
◆強制的に改行したい時に使うbrタグとは役割が異なる
◆SEO対策やより良いユーザー体験のために、brタグは多用せずpタグを使った方が良い

pタグについて、よくわかったかな?
うん、バッチリだよ!ありがとうブルーちゃん!


また困ったことがあったら気軽に聞いてね〜
最新の記事一覧
マークアップとは?正しい意味を解説!基本的なHTMLタグも
SEO
サイトスピードの重要性は?おすすめの改善方法5選も紹介!
SEO
カーディナリティの意味や重要性は?初心者向けに分かりやすく解説
SEO
インバウンド集客のメリットは?効果的な施策やコツを紹介!
SEO
ページエクスペリエンスアップデートの内容は?変更点や影響を解説
SEO
ランキングファクターとは?検索順位をアップするためのポイント
SEO
Webマーケティングとは?種類と実践例をわかりやすく解説!
マーケティング
オウンドメディアの作り方とは?最初に決めるべきことを解説!
SEO
マーケティング分析とは?手法と成功のポイントを徹底解説
SEO
SEOタグとは何?種類や活用方法をわかりやすく解説!
SEO
トラフィックシェアとは?基本から活用法まで徹底解説!
SEO
ページ内リンクとは?必要性や設定方法も初心者向けに詳しく説明!
SEO
【歯医者のSEO対策】ホームページ制作で注意すべきポイントを紹介
SEO
学習塾のSEO対策まとめ!失敗しないための注意点も紹介
SEO
不動産のSEO対策は何をすべき?キーワード選びのポイントも解説
SEO
aタグとは?Webページを繋ぐ架け橋の使い方を徹底解説!
SEO
ページがフリーズする原因と対策とは?ブラウザ環境を快適にしよう!
SEO
要約とは?正しい意味や文章を要約する手順・コツを紹介
SEO
文章の書き方やコツを徹底解説!簡潔で分かりやすい文章とは?
SEO
検索エンジンのランキングは?世界と国内のシェア率を比較
SEO



最新の記事一覧
マークアップとは?正しい意味を解説!基本的なHTMLタグも
SEO
サイトスピードの重要性は?おすすめの改善方法5選も紹介!
SEO
カーディナリティの意味や重要性は?初心者向けに分かりやすく解説
SEO
インバウンド集客のメリットは?効果的な施策やコツを紹介!
SEO
ページエクスペリエンスアップデートの内容は?変更点や影響を解説
SEO
ランキングファクターとは?検索順位をアップするためのポイント
SEO
Webマーケティングとは?種類と実践例をわかりやすく解説!
マーケティング
オウンドメディアの作り方とは?最初に決めるべきことを解説!
SEO
マーケティング分析とは?手法と成功のポイントを徹底解説
SEO
SEOタグとは何?種類や活用方法をわかりやすく解説!
SEO
トラフィックシェアとは?基本から活用法まで徹底解説!
SEO
ページ内リンクとは?必要性や設定方法も初心者向けに詳しく説明!
SEO
【歯医者のSEO対策】ホームページ制作で注意すべきポイントを紹介
SEO
学習塾のSEO対策まとめ!失敗しないための注意点も紹介
SEO
不動産のSEO対策は何をすべき?キーワード選びのポイントも解説
SEO
aタグとは?Webページを繋ぐ架け橋の使い方を徹底解説!
SEO
ページがフリーズする原因と対策とは?ブラウザ環境を快適にしよう!
SEO
要約とは?正しい意味や文章を要約する手順・コツを紹介
SEO
文章の書き方やコツを徹底解説!簡潔で分かりやすい文章とは?
SEO
検索エンジンのランキングは?世界と国内のシェア率を比較
SEO