今回は、HTMLのpとbrの違いと正しい使い方をSEO観点から考えて解説していきます。
なんとなくわかっているけど、しっかり理解していないbrタグの使い方などについて、理解を深めることで、正しいコードを書くことができます!
pとbrの違いと正しい使い方を学び、SEOから見ても、ユーザーから見ても、伝わる文章にしましょう!
Pタグとは?brタグとは?
pタグとは「paragraph」の略で「段落・分の区切り」を意味します。
brタグとは「Break」の略で、改行を行なうためのタグです。
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)でした!