改行brと段落pを混同しちゃダメ!正しい使い方を覚えておこう!

執筆者

株式会社NOBITA代表取締役。グループ企業の株式会社ノイズにてフロントエンドエンジニア兼ディレクターを担当。LIGMAKEPOなどのメディアでは「のび太」名義にてライターとして執筆活動も行っている。

監修

NOIZZ

株式会社ノイズ

http://noizz.co.jp/

マーケティングコンサルティング企業。事業戦略・事業開発支援のほか、MAKEPO等のメディアを展開。ウェブ制作系グループとして株式会社NOBITAを抱えている。

特にブログを始めたばかりの方はHTMLタグの正しい使い方をしていない場合が多いと思います。その中でもbr(改行)とp(段落)は多い間違いの1つ。行間を大きく取るためにbrを連続して使うのは文法上では正しくありません。

今回はその理由と正しい使い方についてお伝えします。

連続改行brと段落p

br

まず以下の文章をご覧ください。

Webマーケティングとは、WebサイトやWeb技術を応用したマーケティング手法です。

企業の事業内容によって内容は多岐にわたるため一概には言えないが、Web広告による自社のWebサイトや商品の告知宣伝、Webサイトで展開する商取引活動(いわゆる電子商取引)、Webサイトを窓口とした顧客との継続的な双方向の情報交換などがあります。

事業内容に関連する市場調査やマーケティングリサーチにWebサイトやWeb技術を応用することなどがWebマーケティングに含まれる。

上記の文章はHTML上では以下のようになります。

<p>Webマーケティングとは、WebサイトやWeb技術を応用したマーケティング手法です。</p>
<p>企業の事業内容によって内容は多岐にわたるため一概には言えないが、Web広告による自社のWebサイトや商品の告知宣伝、Webサイトで展開する商取引活動(いわゆる電子商取引)、Webサイトを窓口とした顧客との継続的な双方向の情報交換などがあります。</p>
<p>事業内容に関連する市場調査やマーケティングリサーチにWebサイトやWeb技術を応用することなどがWebマーケティングに含まれる。 </p>
<p>Webマーケティングとは、WebサイトやWeb技術を応用したマーケティング手法です。<br><br>
企業の事業内容によって内容は多岐にわたるため一概には言えないが、Web広告による自社のWebサイトや商品の告知宣伝、Webサイトで展開する商取引活動(いわゆる電子商取引)、Webサイトを窓口とした顧客との継続的な双方向の情報交換などがあります。<br><br>
事業内容に関連する市場調査やマーケティングリサーチにWebサイトやWeb技術を応用することなどがWebマーケティングに含まれる。 </p>

HTMLの構造は違くても、見た目は同じになります。

WordPressで記事を作成する場合は、デフォルトの状態でエンターを押すたびに自動的にpタグがhtml上に挿入される仕様になっています。

ただ、テキストエディタではエンターを押した時の挙動が異なります。改行でbrタグが挿入され、1行以上空けた改行はpタグが挿入されます。どんなに改行を入れても見た目に反映されません。ただの段落として処理されるので、改行タグは入りません。

それぞれのエディタで意図した通りの結果に出来るように使い方と挙動を覚える必要があります。

改行(brタグ)と段落(pタグ)を混合してはいけない理由

ノートパソコン・若い女性

1. ブラウザによって見え方が変わる場合がある

インターネットには様々なブラウザ(IE、Google Chrome、Safari、Firefoxなど)がありますが、連続改行brと段落pでは見え方が異なる場合があります。

段落pタグと段落の間は1~1.5行ぶんの間をとるのが一般的ですが、CSSの設定によっては余白がない場合もあります。また、今後HTMLの仕様が変更された時にも非常に困ります。 各タグの正確な使い方を覚えておけば、どのブラウザでも同じように表示させることができます。

2. 検索エンジンにサイト構造を正確に伝える

サイトの見え方はクローラーと私たちとでは違います。検索エンジンが正確にサイトを理解するためには、正しい文法記述でなければなりません。正しい記述をしたからといって、必ず上位表示されるわけではありません。あくまで要素基準の1つに過ぎません。

検索結果の順位を決定する要素は他にも多くありますが、正しい記述をしておくことでライバルサイトよりも1歩リードできるかもしれません。また、これからサイトの構造がさらに重要視される可能性もあります。

WordPressでの行間の広げ方

brr

pタグにマージンを設定して行間を調整するのが正しい記述です。

下の段落から1em空きます。

下の段落から2em空きます。

下の段落から5em空きます。

上の段落から5em空きます。

<p style="margin-bottom:1em;">下の段落から1em空きます。</p>
<p style="margin-bottom:2em;">下の段落から2em空きます。</p>
<p style="margin-bottom:5em;">下の段落から5em空きます。</p>
<p>上の段落から5em空きます。</p> 

CSSをインラインで書くのはあまりよろしくないので、外部スタイルシートに記述しておきましょう。

CSS

.p1{
   margin-bottom: 1em;
}
.p2{
   margin-bottom: 2em;
}
.p3 {
   margin-bottom: 5em;
} 

HTML

<p class=“p1">下の段落から1em空きます。</p>
<p class=“p2">下の段落から2em空きます。</p>
<p class=“p3">下の段落から5em空きます。</p>
<p>上の段落から5em空きます。</p> 

HTMLは構造を示すものであり、デザイン・見た目はすべてCSSで行うというのが基本的なルールです。そのため行間(余白)を作るために改行を使うのは正しくありません。

※<br>と<br />の違い

<br>と<br />を混合して使っている人も多いと思います。 正確には以下の違いがあります。

HTML4 <br>
XHTML <br />
HTML5 どちらもOK

サイトによって正しく使い分けましょう。


改行と段落の使い分ける一番の理由は、検索エンジンに記事の構造を正しく伝えるためです。SEOを少しでも良くするためにぜひ心がけていきましょう!