連続改行brはNG！？覚えておいて損はない改行と段落の使い分け方

記事を書くのに必要な HTML タグは限られていますが、ブログを始めたばかりなら正しい使い方を知らず誤用していることが少なくありません。

たとえば、行間を大きくとるため・空白行を入れるために <br> を連続して使うのは文法上 NGとされています。

なぜダメなのでしょう。その理由と、改行と段落の正しい使い分け方を解説していきます。覚えておくとライバルサイトにちょっぴり差をつけられるかもしれません。

改行と段落を正しく使わなければならない理由

改行を正しく使うべき理由は 3 つあります。

詳しく見ていきましょう。

ブラウザの表示を統一して読みやすくする

ある程度適当な記述でも、ブラウザは自動補正して表示してくれます。改行タグ <br> に関して言うなら、連続して使用すればどのブラウザでもそのぶんだけ改行して表示してくれます。

つまり、人が見るぶんには何の問題もないわけですね。

段落 <p> と段落の間は 1 ～ 1.5 行ぶんの空白をとるのが一般的ですが、CSS の設定によっては余白がない場合もあります。

ただ、改行と段落タグを含めて、様々なタグの記述を適当に覚えてしまうとあとから仕様が変更された時に困るかもしれません。

各タグの正確な使い方を覚えておけば、どのブラウザでも同じように表示させることができます。

記事の構造を検索エンジンに適切に伝える

HTML タグを正確に使う一番の理由は、検索サイトに記事の構造を適切に伝えるためです。

もちろん、正しい記述をしたから必ず上位表示されるわけではありません。あくまで 200 以上ある検索順位決定要素のほんの一部です。

ライバル記事と比べて構造以外の要素がほぼ同スコアなら正しい記述をしておいたほうが有利、ぐらいに考えておいてください。

今後、サイトの構造がさらに重要視される可能性は否定できません。

僕が几帳面なA型だから

僕は変なところにこだわってしまい、できるだけ綺麗に記述したいので改行と段落を使い分けています。

web 関係の仕事をしている方なら、汚いソースを見るだけでイライラしちゃうことありますよね？ タグが大文字で書かれていたら吐き気がする……までいくかわかりませんが、そんなレベルの話です。

と言って、このブログですべてのコードが完璧に記述されているわけではありませんので、まあ自己満足の世界ですｗ

br（改行）とp（段落）の使い方

それでは、改行タグ <br> と 段落タグ <p> の具体的な違いを見ていきましょう。

基本として段落はひとつの意味を持つかたまりです。
こうして途中で改行しても、上の行と同じグループとしてみなされます。

しかし、このように段落をわけると前の段落とは違う意味をもつかたまりとなります。わかりづらければ、「しかし」や「ところで」などが挿入されるタイミングと考えてください。

この 2 つの段落を HTML で表すとこうなります。

<p>基本として段落はひとつの意味を持つかたまりです。<br />
こうして途中で改行しても、同じグループとしてみなされます。</p>

<p>しかし、このように段落をわけると前の段落とは違う意味をもつかたまりとなります。わかりづらければ、「しかし」や「ところで」などが挿入されるタイミングと考えてください。</p>

これが基本的な使い方ですが、このように記述しても見た目は変わりません。

<p>基本として段落はひとつの意味を持つかたまりです。<br />
こうして途中で改行しても、同じグループとしてみなされます。<br />
<br />
しかし、このように段落をわけると前の段落とは違う意味をもつかたまりとなります。わかりづらければ、「しかし」や「ところで」などが挿入されるタイミングと考えてください。</p>

この場合、見た目（人の視点）は 2 つの段落ですが、検索エンジンは 1 つの段落であると認識します。

ブログによって違う自動挿入タグ

ブログ管理画面（エディタ）で記事を書く場合、2 つ以上の改行を入れたときに <br> が使われるのか <p> が使われるのか、各ブログサービスによって変わります。

無料ブログでは、意図的に <p> を使わない限りすべて <br> で処理されることもあります。<br> を使わないよう設定ができるブログもありますが、デフォルトのままだと改行タグが並んでいます。

※「ホームページを作る人のネタ帳」さん（FC2）の記事部分ソース

WordPressでは、改行で <br> タグが挿入され、1 行以上空けた改行は <p> タグが挿入されます。

WordPressで2行以上の間隔を空ける方法

WordPress のエディタには「ビジュアル」と「テキスト」という 2 つのモードがあります。

テキストモードで書いた場合、どんなに改行を入れても見た目に反映されません。ひとつの段落として処理されます。

もし行間を大きくとるなら、以下の方法があります。

非推奨：プラグインを使用して<br>を強制挿入

「brBRbr」というプラグインをインストールすると、改行はすべて <br> が適用されます。無料ブログのエディタと同じ感覚ですね。

記事全体が <p> で囲まれることになるので、「記事＝大きな段落」という扱いになります。もうどうしても <br> じゃなきゃイヤ！ という方は使ってみてください。

かなり古いバージョンではこのプラグインがよく使われていたのですが、現在のバージョンではあまり使う意味がないと思います。

非推奨：空白の<p>タグを連続させる

複数の空白行を入れたいのであれば、ビジュアルエディタで改行を行えばそのとおり反映されます。

テキストモードに切り替えると、以下のコードが挿入されているのがわかるでしょう。

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

  という「改行しないスペース」が段落内に挿入されるわけですね。

最も簡単な方法ですが、スマートな方法ではありません。

文法上正しい記述にするなら、CSS で調整するのがベストです。

推奨：CSSでマージンを指定する

<p> にマージン（余白）を設定して行間を調整するのが正確な記述です。

<p style="margin-bottom:1em;">ここは普通の段落です。下の段落とは1行ぶん空きます。</p>
<p style="margin-bottom:2em;">下の段落と2行ぶん空けてみます。</p>
<p style="margin-bottom:5em;">下の段落と5行ぶん空けるとこうなります。</p>
<p>ちゃんと余白ができましたね。</p>

もっと正確な記述をするなら、すべてにクラス名を割り当て、CSS は外部スタイルシートに記述します。

■CSSサンプル

.mb1{
   margin-bottom: 1em;
}
.mb2{
   margin-bottom: 2em;
}
.mb5{
   margin-bottom: 5em;
}

■HTMLサンプル

<p class="mb1">ここは普通の段落です。下の段落とは1行ぶん空きます。</p>
<p class="mb2">下の段落と2行ぶん空けてみます。</p>
<p class="mb5">下の段落と5行ぶん空けるとこうなります。</p>
<p>ちゃんと余白ができましたね。</p>

HTML は構造をあらわし、デザインは CSS で行う、というのが web の基本です。余白もデザインのひとつですから、CSS で調整するのが正しいわけですね。

正確性を求めるなら、HTML 内で <br>を 多用したり空の段落を複数挿入するのは避けましょう。

<br>と<br />の違い

先ほどから <br> と <br /> を混在して書いてますが、正確には以下の違いがあります。

HTML と XHTML の違いはこちらで解説しているのでぜひご覧ください。チェックツールのご紹介もしています。

まとめ

改行と段落の使い分ける理由は、検索エンジンに記事の構造を正しく伝えるためです。もし SEO を意識しているなら覚えておきましょう。

無料ブログでも WordPress でも、あるいは一般サイトでも当てはまりますが、SEO 施策がされているテンプレートを使っているのに改行と段落の使い方がメチャクチャなら意味がありません。

もっとも、一番重要なのは記事自体ですけどね。

細かい話ですが、できるだけ多くのユーザーに記事を読んでもらうために、できることを少しずつやっていきましょう！

それでは、また。