BRタグとは～改行してHTML構築するための基本知識

BRタグで改行し、HTMLマークアップしながら、サイト構築する方法があります。

今回は、HTMLでBRタグを使わない件、HTML5のBRタグについて、HTMLのBRタグ[＜br＞と＜br /＞（スラッシュ閉じる）] の違いについて中心に解説したいと思います。

BRタグとは

BRタグとは、行を変える（改行する）際に使うHTMLタグです。
主に「ひとまとまりのテキスト文章」や「項目や順序以外の短めのテキスト文章」などのWebコンテンツを改行するときに使います。

BRタグの多用により、認識しずらいHTMLソースコードとなるケースが見られます。
BRタグだけでなく、PタグやDIVタグなど使って、認識しやすいソースコード（構造）にすることが大切です。

HTMLでBRタグを使わない件

HTMLでBRタグを使わない件について、以下のような理由があります。

・ソースコードが見ずらいから
BRタグで改行を多用し、ソースコード上で他のHTMLタグと混同し見ずらくなる

・コンテンツの区切り（セクション）がわかりずらいから
BRタグで改行を多用し、ソースコード上でコンテンツ同士の区切りがわかりずらくなる

・デバイスによって見え方が変わるから
BRタグで改行しても、PC、スマホ、タブレットなどのデバイス解像度の違いにより、改行位置が変わってくる

HTML5のBRタグについて

HTML5のBRタグについて、HTML4.01からHTML5へのバージョンアップによる変更点は特にありません。
※参考：＜br＞－HTML5タグリファレンス

HTML5のBRタグも今まで通り、改行がコンテンツの一部を成すような場合に使用し、デザイン調整の目的で使用しないようにしましょう。

HTMLのBRタグ[＜br＞と＜br /＞（スラッシュ閉じる）] の違い

HTMLのBRタグ[＜br＞と＜br /＞（スラッシュ閉じる）] の違いは、以下のようになります。
※参考：htmlの改行タグを＜br＞ではなくて＜br /＞と書くのはどうしてでしょう？

＜br＞は、XHTMLの構文以前に採用された閉じタグが無い要素（空要素）です。
＜br /＞は、XHTMLの構文を機に採用され、DOCTYPEが「XHTMl1.0」「XHTML1.1」などの場合に、BRタグ含む全ての空要素をスラッシュ付きで記述するルールとなりました。

現在のHTML5の構文では、基本はスラッシュなしのBRタグを使いますが、「＜br＞」「＜br /＞」どちらで記述しても問題ないようです。

このような、＜br＞と＜br /＞の違いを理解しながら、適切なマークアップを心がけましょう。

BRタグの使い方・書き方

BRタグの使い方・書き方は、以下のようになります。

内容が変わらないひとまとまりのテキスト文章での使い方

＜p＞SEOとは、Search Engine Optimization の略で「検索エンジン最適化」を意味します。＜br＞ つまりSEOは、インターネットの検索結果でより多くサイト表示させるために行う全体的な取組みを指します。＜/p＞

項目や順序以外の短めのテキスト文章での使い方

＜p＞会社名：株式会社○○○○○＜br＞ 住所：北海道○○市～＜br＞ TEL：○○○-○○○-○○○○＜/p＞

BRタグにCSSを適用して改行を無効化する方法[class（クラス）指定など]

BRタグにCSSを適用して改行を無効化するには、以下のような方法があります。

直接指定する

要素名brに直接CSSの「dispaly」プロパティでnone値を指定することで、BRタグ（改行）を無効化できます。
複数ページにBRタグがある場合、より効果的です。

br { display: none; }

class属性を使う

主に、CSSなどの外部ファイルと連携するために指定する属性です。
CSSの記述では、「要素名.クラス名 {プロパティ名:値;}」という書式です。
※要素名は省略できます。

＜p＞SEOとは、Search Engine Optimization の略で「検索エンジン最適化」を意味します。＜br class=”text”＞ つまりSEOは、インターネットの検索結果でより多くサイト表示させるために行う全体的な取組みを指します。＜/p＞

br.text { display: none; }

BRタグの連続改行

BRタグの連続改行をすべてのWebコンテンツで利用するのはあまり望ましくありません。

HTMLでBRタグを使わない件でも先述したよう、「ソースコードが見ずらい」「コンテンツの区切りがわかりずらい」「デバイスによって見え方が変わる」などの事項が発生しやすくなります。

なので、BRタグの連続改行は控え、CSSでコンテンツ間隔を柔軟に調整できるようマークアップするとより良いと思います。

BRタグとSEOについて

BRタグとSEOについて、直接的な検索順位への影響はほぼ無いと考えられます。

しいて言うなら、BRタグの多用でソースコードが増え、ファイルサイズ増加によるページ読み込み速度が遅くなるといった悪影響があるかもしれません。

BRタグによるSEO効果について簡単に調べましたが、あまり情報がないので、そこまで注視する要素ではないかもしれません。

BRタグで行間・高さ調整

BRタグで行間・高さ調整することが可能ですが、コンテンツの間隔が空きすぎたりして、望むデザインに調整できないことがあります。

見やすいコンテンツの方が、サイトのパフォーマンスも上がりやすくなります。

なのでコンテンツの行間・高さ調整は、BRタグよりCSSを使って、柔軟に微調整できるようにした方が良いと思います。

BRタグ（改行タグ）を自動挿入する

BRタグ（改行タグ）を自動挿入するには、以下のようなツールを活用すると便利です。

・HTMLやWikiの改行タグ自動挿入機
普通のテキストに、HTMLやWikiの改行タグを自動で一括挿入したり、タグ入りのテキストから改行タグを一括で除去。

まとめ

BRタグを適切に使い、サイト構築に役立てましょう。

コンテンツの質を上げ、サイトの価値を高めながら、SEO対策で上位化を目指すことが重要です。