HTMLのpとbrの違いと正しい使い方をSEO目線で徹底解説！

今回は、HTMLのpとbrの違いと正しい使い方をSEO観点から考えて解説していきます。

なんとなくわかっているけど、しっかり理解していないbrタグの使い方などについて、理解を深めることで、正しいコードを書くことができます！

pとbrの違いと正しい使い方を学び、SEOから見ても、ユーザーから見ても、伝わる文章にしましょう！

Pタグとは？brタグとは？

pタグとbrタグの違い

ここで、最初に初心者に注意して頂きたいことが、改行するためにpタグを使用してはいけないということです。

そもそも、「段落」とは先程触れたように、「段落・分の区切り」つまり「長い文章を内容などからいくつかに分けた区切り(文章の始まり～句点(。))」を意味します。

つまり、改行するためにbrタグを使ってしまうと、「。」まで到達せず切れてしまいますよね。

これがpタグとbrタグの大きな違いになります。

pタグとbrタグの正しい使い方

pタグの正しい使い方としては、句点「。」ごとに<p>〜</p>で囲う。

<p>吾輩は猫である。</p>
<p>名前はまだ無い。</p>
<p>どこで生れたかとんと見当がつかぬ。</p>
<p>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
<p>吾輩はここで始めて人間というものを見た。</p>

brタグの正しい使い方は、<p>〜</p>の中でどうしても改行がしたい場合に使う。

<p>吾輩は猫である。</p>
<p>名前はまだ無い。</p>
<p>どこで生れたかとんと見当がつかぬ。</p>
<p>何でも薄暗いじめじめした所で<br>ニャーニャー泣いていた事だけは記憶している。</p>
<p>吾輩はここで始めて<br>人間というものを見た。</p>

また、下記のように、空のpタグやbrタグで、余白を取ることは絶対に避けましょう！

<p>吾輩は猫である。</p>
<p>名前はまだ無い。</p>
<p></p>
<p></p>
<p>どこで生れたかとんと見当がつかぬ。</p>
<p>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
<p>吾輩はここで始めて人間というものを見た。</p>

空のpタグを重ねて余白を取る×

<p>吾輩は猫である。</p>
<p>名前はまだ無い。</p>
<br>
<br>
<p>どこで生れたかとんと見当がつかぬ。</p>
<p>何でも薄暗いじめじめした所で<br>ニャーニャー泣いていた事だけは記憶している。</p>
<p>吾輩はここで始めて<br>人間というものを見た。</p>

空のbrタグを重ねて余白を取る×

brタグはSEO的にどうなの？

SEOの観点から考えると、brタグを使った改行は良くありません。

brタグを使った改行は「強制改行」と言われ、デザイン的な部分で改行せざるを得ないときに、無理矢理に改行するために、使われたりしています。

ここで問題なのは、brタグを使った「強制改行」は、Google的には良くないと言われています。

理由として、現社会では、スマートフォンでの閲覧がPCを上回っていることから、下手にbrタグで改行をしてしまうと、デバイスによっては、下記の画像のように変なところで改行されてしまい、見た目が悪くなってしまうことが多いんです。

つまり、Googleの判断としては、「変な位置で改行されて、読みにくくなり、ユーザーの離脱に繋がる(ユーザビリティが下がる)」と言うことなんですね。

<p>吾輩は猫である。</p>
<p>名前はまだ無い。</p>
<p>どこで生れたかとんと見当がつかぬ。</p>
<p>何でも薄暗いじめじめした所で<br>ニャーニャー泣いていた事だけは記憶している。</p>
<p>吾輩はここで始めて人間というものを見た。</p>

年々、デバイスも増えてきており、各デバイスによって横幅のサイズが異なるので、注意しておいた方が良いですね。

なので、原則的にはbrタグは使用せず、pタグを使うのが望ましいと言えます。

ちなみに、brタグは禁止されているわけではないですよ。

まとめ

brタグを使った「強制改行」を行なう際には、デバイスごとに表示が変わる可能性があるので、気を付けて下さいね。

また、これを読んだデザイナーさんは、コーダーやフロントエンドのことも考慮して、デザインを制作してみて下さい！

そうすることで、視野も広がり、また違ったデザインや発見が見えてくると思います。

以上、アサル（ASAL）でした！