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

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

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

なぜダメなのでしょう。その理由と、改行と段落の正しい使い分け方を解説していきます。覚えておくといつか役に立つかもしれません。

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

正しく使うべき理由は下記の3点。

もう少し細かく解説します。

ブラウザの表示＝ヒトの視点

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

つまり、ヒトが見るぶんには何の問題もありません。

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

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

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

記事の構造＝検索エンジンの視点

検索サイトに記事の構造を正確に伝える。これが一番の理由です。

勘違いしないでほしいのは、正しい記述をしたから必ず上位表示されるわけではない、ということ。あくまで判定基準の一部です。

検索結果の順位を決定する要素はいくつかありますが、ライバル記事と比べて構造以外の要素がほぼ同スコアなら正しい記述をしておいたほうが有利、ぐらいに考えておいてください。

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

A型だから＝僕の視点

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPressエディタの自動補正機能

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

無料ブログから引越しすると戸惑うのが、どんなに改行を入れても見た目に反映されないところでしょう。ただの段落として処理されるので、改行タグは入りません。

WPで行間を大きくとる方法はいくつかあります。

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

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

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

ただし記事全体が<p>で囲まれることになるので、「記事＝大きな段落」という扱いになります。

もうどうしても<br>じゃなきゃイヤ！という方は使ってみてください。どんなに素晴らしいテーマを使っていても一瞬で台無しになるので、非推奨です。

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

こちらも非推奨ですが、中身のない段落タグを連続して置くと見た目は空白になります。

追記WordPress最新版のビジュアルエディタで複数改行を行うと、下記のコードが挿入されます。

<span>を使っても同様です。

断言できませんが、何らかのスパムとみなされる可能性はゼロではありません。

非推奨の方法を試すぐらいなら、文法上正しい下記の方法がベストです。

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

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

サンプルはこんな感じ。

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

■CSSサンプル

■HTMLサンプル

HTMLは構造を示すものであり、デザインはCSSで行う、というのが原則です。余白もデザインのひとつ。

このため、HTML内で<br>を多用したり空の段落を挿入するのは間違い、というわけです。

<br>と<br />の違い

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

• HTML4・・・<br>
• XHTML・・・<br />
• HTML5・・・どちらでも可

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

まとめ

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

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

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

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

それでは、また。

よく読まれている関連記事

• • 
  • 複数のサイトからパクってひとつの記事にしても上位表示できるのか
• • 
  • モバイルSEO必須！WordPressブログを「スマホ対応」にする方法
• • 
  • SEOど素人が最初に理解しておくべき検索エンジンの仕組みを解説
• • 
  • Google検索結果の新デザインに合わせてタイトルを変える必要はない
• • 
  • SEOで重要な被リンクを獲得したいなら充実した情報を提供しよう
• • 
  • WordPressにSEOプラグインを入れただけで順位が上がるのか試してみた結果
• • 
  • 新米ブロガーが確実にブログのアクセス数を増やしていく方法
• • 
  • 初心者向けの超手抜きSEOで検索サイトからのアクセス数を増やそう