連続改行brはNG！HTMLの正しい改行・段落・空白行の使い方

HTMLの改行と段落

HTML で「空行」を入れるにはどうしたらよいですか？

Microsoft Word などの文書作成ソフトでは Enter キーで任意の空白行を入れられますが、HTML ではタグを使わなければ改行も空白行も入れられません。

WordPress のエディターはタグを入れなくても改行や段落は反映されますが、空白行は反映されていないことがありますよね。思いどおりの装飾をしたいなら HTML・CSS に関する最低限の知識が必要です。

なかには、行間を大きくとるため・空白行を入れるために <br> を連続して使っている方もいますが、これは HTML の文法上 NG となっています。

本記事では、改行に関わってくる <br> と <p> について解説すると共に、正しい空白行の入れ方もご紹介しています。

改行と段落のタグを正しく使うべき理由

改行だけに限ったことではありませんが、HTML タグを正しく使うべき理由は 2 つあります。

  1. どのブラウザでも同じように表示させるため
  2. 検索エンジンにページの内容を正確に伝えるため

理由（1）
どのブラウザでも同じように表示させるため

ある程度適当に HTML を書いても（厳密にルールを守らなくても）、最新の Chrome や Firefox などのモダンブラウザは自動補正して表示してくれるようになっています。

たとえば、改行タグ <br> を以下のように連続して使用すれば、そのぶんだけ改行して表示してくれます。

空白行を入れたい！<br>
<br>
<br>
<br>
これで反映されます

しかし、連続する <br> をひとつにまとめてしまうブラウザも存在します。そのブラウザを使っている方には、空白行ではなくただの改行として見えてしまうわけですね。

HTML は文書の構造を定義するものであり、デザインに使うものではありません。見た目を整えたいときは、HTML タグではなく CSS を使いましょう。

どのブラウザでも同じように表示させたいのであれば、正しい使い方を覚えておくべきです。

理由（2）
検索エンジンにページの内容を正確に伝えるため

検索エンジンは、HTML タグによって定義された文書構造を見ています。

正しくタグを使っていなければ、場合によってはページの内容が正確に伝わらないかも、ということですね。

検索エンジンは日々進歩しており、ある程度適当な HTML でも正しく分析できるようになってきています。また、HTML の記述よりページの内容・品質を重視していますから、正しい書き方をすれば検索順位が上がるというわけでもありません。

それでも、ページの内容を正確に伝える努力を怠るべきではなく、読者にも検索エンジンにも読みやすい記事を書くのが理想的です。

<br>と<br />の違い

改行タグは <br> と <br /> の 2 つがあり、解説書によって表記が異なっていると思います。

これは HTML の仕様による違いです。

バージョンタグ
HTML4<br>
XHTML<br />
HTML5どちらでも可

現在は HTML5 で書いていると思いますので、どちらを使ってもかまいません。

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

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

わかりやすく、改行部分に br を入れておきます。

パターン A

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

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

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

パターン B

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

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

どちらのパターンも見た目はほぼ同じですが、コンピュータ（検索エンジン）の認識が違ってきます。

どこからどこまでがひとつの段落なのかを正確に伝えるために、パターン A のように <p> で正しくマークアップしましょう。

<br> の連続使用は HTML の文法上 NG なので、そもそもパターン B は誤りです。

行の高さや段落間の余白はCSSで設定する

段落の基本デザインは CSS で設定しましょう。line-height と margin を使います。

<p> に共通する指定をする場合は、以下のように記述します。数値はお好みで変更してください。

p {
    line-height: 1.5;
    margin-bottom: 2em;
}

CSS をリセットしていない場合は、ブラウザのデフォルト値が反映されます。

空白行を入れる（2行以上の間隔を空ける）方法

では、HTML で空白行を入れる方法を見ていきましょう。

非推奨
brを連続で入れる

改行タグ <br> を連続させるとそのぶん改行されますが、先ほどから繰り返しているとおりこれは非推奨です。

空白行を入れたい！<br>
<br>
<br>
<br>
これで反映されます

非推奨
カラのpを連続で入れる

何も入っていないカラの <p> を連続させる方法もあります。

<p>空白行を入れたい！</p>
<p></p>
<p></p>
<p></p>
<p>これで反映されます</p>

CMS のエディターに自動整形機能がある場合、何も入っていないタグは自動的に除去されることがあります。&nbsp; （改行なしのスペース）を入れておきましょう。

<p>空白行を入れたい！</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>これで反映されます</p>

WordPress クラシックエディターのビジュアルモードでも、2 行以上 Enter で改行すると同様の処理が行われます。

しかし、<br> と同じく HTML でデザインしていることになるので、厳密に言えばあまり好ましくありません。

推奨
CSSでmarginを調整する

任意の段落間の余白を大きくとりたい（見た目に空白行を入れたい）ときは、class をつけて margin で調整するのが最もスマートです。

<p class="mb5">空白行を入れたい！</p>
<p>これで反映されます</p>
p.mb5 {
    margin-bottom: 5em;
}

上記のコードで、5 文字分の余白が入ります。

「.mb1」「.mb2」など、余白専用の CSS をいくつか書いておくと便利かもしれませんね。あらかじめ設定されているテンプレートもあります。

WordPressの改行・余白・空白行

現在、WordPress のエディタは 3 パターンあります。

  • クラシックエディター（テキストモード）
  • クラシックエディター（ビジュアルモード）
  • ブロックエディター

それぞれ改行や段落の入れ方が異なるので、ここでおさらいしておきましょう。

クラシックエディター（テキストモード）

テキストモードの操作方法は以下のとおりです。

種類操作方法
改行Enter
段落Enter を 2 回（ 1 行空ける）
空白行CSS でmargin を調整

1 行以上空けても空白行とはならず、段落として処理されます。空白行を入れたいときは、CSS で調整しましょう。

クラシックエディター（テキストモード）

クラシックエディター（ビジュアルモード）

ビジュアルモードの操作方法は以下のとおりです。

種類操作方法
改行Shift + Enter
段落Enter
空白行Enter 2 回以上（※カラの <p> が入る）

Microsoft Word などの操作方法に近く、Enter 連続で空白行も反映されますが、カラの <p> が挿入される仕様となっています。

正しい HTML の書き方にこだわるなら、テキストモードに変更して class で余白を調整するのがベストです。

ブロックエディター

ブロックエディターの操作方法は以下のとおりです。

種類操作方法
改行Shift + Enter
段落Enter（段落ブロック）
空白行スペーサーブロック（※カラの <div> が入る）

クラシックエディターとは概念が異なりますが、改行・段落はビジュアルモードと近い操作方法です。

Enter 連続でも空白行とならないため、任意の余白を入れたいときは「スペーサー」ブロックを使いましょう。

スペーサーブロックは、カラの <div> の高さを CSS で調整する仕様となっています。

<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

aria-hidden="true" で要素が非表示であることを伝えており、スクリーンリーダーでの読み上げがスキップされます。アクセシビリティを考えてのことですね。

スペーサーブロックではなく、任意のブロックに class を追加して CSS で調整することもできます。

とくにこだわりがなければ、スペーサーブロックの使用で問題ありません。

まとめ

改行と段落を正しく使い分けるのは、読者にも検索エンジンにも読みやすい記事にするためです。

自分がふだん使っている環境を中心に考えがちですが、読者は様々な環境で閲覧していることを覚えておきましょう。

どんなに正しくマークアップしても低品質な記事を書いていては何もなりませんから、まずは良質な記事を書くことに専念するのがよいと思います。

良質なコンテンツとは｜ブログ初心者が意識すべきなのは「だれに向けて書くか」 – Naifix
検索サイトで上位表示されるには、良質なコンテンツが必要とされています。では、どうすれば良質な記事が書けるのでしょうか。ブログ初心者が心がけるべきなのは、誰に向…
naifix.com

できるだけ多くの方に記事を読んでもらうために、できることを少しずつやっていきたいですね。

それでは、また。

Naifix Limited

無料プレゼント

有料会員向けに配信していた「ブログのアクセス数を最大限に増やす SEO 施策」を今だけ無料でプレゼントしています。

今すぐ読んでみる

Naifix 編集部

Web コンサルティング業務を中心に、サイト制作・コンテンツ販売・メディア運営代行業務を行っております。本ブログ（Naifix）では、おもにブログ初心者向けのノウハウを無料で配信しています。

執筆・監修　Direx Marketing, Inc.