brタグは、HTMLのなかでも使用頻度の高い重要なタグです。
この記事では、

• brタグとは？pタグやpreタグとの違い
• brタグの使い方と注意点

について詳しく解説します。
ライティングやサイト制作の際の参考となれば幸いです。

brタグとは

brタグとは、改行を表すタグです。「br」は英単語の「Break」の略で、「改行タグ」とも呼ばれます。

HTMLで記述する際、エディタで改行してもプレビューには反映されません。そのため、brタグを使用して改行します。

<br>と<br/>の違い

brタグには、<br>と<br/>があります。現在のHTML5の環境であれば、どちらを使用しても問題ありません。

HTMLには柔軟性があるので、<br>と表記しても<br/>と表記しても改行されます。しかし、現在のHTML5では<br>が推奨されているため、基本的には<br>を使用した方が良いでしょう。

brタグ以外で改行する方法

HTMLにおいて、btタグ以外で改行する方法はいくつか存在します。ここでは、brタグ以外に改行する方法を2つ解説します。

pタグ

pタグは「Paragraph」の略で、段落を意味します。brタグとは異なり、～と開始タグと終了タグが必要です。改行と幅は、1行分です。

<p>brタグを使用すると改行することができます。</p>
<p>混同されやすいタグにはpタグがあります。</p>
<p>この記事を読んで、知識を整理していきましょう。</p>

このように記述すると、出力結果は以下のようになります。

brタグを使用すると改行することができます。
混同されやすいタグにはpタグがあります。
この記事を読んで、知識を整理していきましょう。

preタグについて

preタグはPreformatted textの略で、整形済みテキストという意味です。このタグで囲んだ文章内は、ソースコードの改行がそのまま反映されます。

しかし、自動的な折り返しがされなくなるため、使用は控えた方がよいでしょう。特に、現在はレスポンシブ対応が求められています。スマートフォンに最適化させる場合は、brタグの使用が賢明です。

brタグの使い方と注意点

ここからは、このbrタグを使用する際に注意すべき点を解説します。

文末に記述する

<br>を行頭に記述すると、その直前の文章がブラウザの右端で終わった場合、1行余分に改行されてしまうことがあります。そのため、brタグは文末に記述するほうが間違いがありません。

スペース目的でbrタグを使用しない

brタグによくある間違いが、改行以外の目的で使用してしまうことです。

<p>brタグを使用すると改行することができます。<br>
<br>
混同されやすいタグにはpタグがあります。<br>
<br>
この記事を読んで、知識を整理していきましょう。</p>

このように、間隔をあけるためのbrタグは文法違反となります。pタグも同様に、スペースをあけるために使用してはいけません。

あくまで段落を分けたい場合に、pタグを使用するようにしましょう。視覚的にスペースをあけたい場合は、CSSを使用して改行の幅を調整します。

brタグを多用しない

brタグを多用しすぎると、かえって読みづらい文章になってしまいます。特にスマートフォンは、１行あたりの文字数が少ないため、改行数が増えます。パソコンで読みやすいような改行でも、スマートフォンでは改行だらけとなってしまうでしょう。

不自然なレイアウトにならないよう、スマートフォンとパソコンの両方でレイアウトを確認することが大切です。

ブラウザの表示を統一する

タグを連続で使用した場合、どのブラウザ上でもその分だけ改行します。しかし、改行をはじめとするタグの仕様は、変更されたとき意図しない動作をする可能性があるので注意してください。

各タグで正しい使い方をしていれば、どのブラウザでも同じように表示されます。仕様が変更されても問題が起こることは少ないです。

行間はCSSで調整する

行間の調整におすすめな方法は、CSSの使用です。CSSはWebページのスタイルを指定する言語で、HTMLを使用するよりも細かい指定をすることができます。

HTMLでWebサイトの構造を作り、CSSでレイアウトを作成するのが現在のWebサイト制作の主流となっています。CSSも活用できれば、スムーズなレイアウトを調整ができるようになるでしょう。

まとめ

本記事では、brタグの意味や使用する際の注意点などについて解説しました。brタグに似た意味のタグも多く混同しやすいため、その場に合ったタグを使用できるようにしましょう。