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 /＞の違いを理解しながら、適切なマークアップを心がけましょう。

検索順位を上げたり、検索流入を増やすにはSEOが重要！

brタグの使い方・書き方

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

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

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

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

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

直接指定する

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

class属性を使う

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

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対策で上位化を目指すことが重要です。