【実例多数】brタグの使いどころやその注意点｜代案も実例付きで解説

（最終更新日：2023年6月）

✔以下の疑問をお持ちの方へ向けた記事です

「HTMLでの改行（br）はどのように行うのだろうか？」
「HTMLのbrタグの使い方を学びたい」
「HTMLでのbrタグの具体的な使用例を見て理解したい」

✔この記事を読むことで得られる知識

• HTMLでのbrタグの基本的な使い方
• brタグを活用するためのテクニック
• HTMLでのbrタグを用いた具体的な使用例

この記事では、HTMLでのbrタグの基本的な使い方から、その応用法まで、具体的な例を交えて詳細に説明します。

また、テキストの改行や間隔調整など、brタグの効果的な利用方法についても紹介します。

ぜひ最後までお読みください。

HTMLのbrを理解するための前提知識

ここでは、ウェブページの基本骨格を作るHTMLについて学びます。

このセクションでは以下の内容を取り扱います。

• HTMLの基本的な概念
• タグと要素について

HTMLの基本的な概念

HTML、つまりHyperText Markup Languageは、ウェブページの土台を作る言語のこと。

それは本や新聞と同じように、テキスト、画像、リンクなどを組み合わせて情報を伝える媒体です。

たとえば、本の章や節はHTMLでは「セクション」や「見出し」タグに相当し、本文の段落は「p」タグに相当します。

以下は本とHTMLで対応した表の例です：

本の要素	HTMLタグ
章	<section>
節	<section>
小節	<section>
見出し	<h1> – <h6>
本文の段落	<p>

タグと要素について

HTMLでは、「タグ」を使ってコンテンツを構成します。

タグは “<” と “>” の間にキーワードを挟んだ形式で、一般的には開始タグと終了タグのペアで使用します。

例えば、「<p>」は段落を開始するタグで、「</p>」はそれを終了します。

そしてこの一連のタグとその間のコンテンツ全体を「要素」と称します。

<!-- 強調要素 -->
<strong>これは強調されたテキストです</strong>

<!-- リンク要素 -->
<a href="https://www.example.com">これはリンクです</a>

<!-- 画像要素 -->
<img src="image.jpg" alt="画像の説明">

<!-- リスト要素 -->
<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

<!-- テーブル要素 -->
<table>
  <tr>
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
  </tr>
  <tr>
    <td>セル1</td>
    <td>セル2</td>
  </tr>
</table>

テキストとHTMLを理解する

HTMLは、テキストをコントロールするためのタグを提供しています。

これらのタグを学ぶことで、ウェブページの情報をどのように伝えるかをより深く理解できるでしょう。

• テキストを表示する基本的なタグ
• テキストの装飾について

テキストを表示する基本的なタグ

HTMLには、テキストを表示するための基本的なタグがいくつかあります。

• 「<p>」：段落を作成し、それぞれの段落は新たな行から始まる
• 「<h1>」から「<h6>」：見出しを作成し、1が最も大きく、6が最も小さい見出しを表す

<h1>我がウェブサイトへようこそ！</h1>

大きな見出しで「我がウェブサイトへようこそ！」と表示します。

テキストの装飾について

HTMLにはテキストを装飾するためのタグもあります。

• 「<strong>」タグ：テキストを太字にする
• 「<em>」タグはテキストを斜体にする

<strong>重要なメッセージ</strong>

「重要なメッセージ」という部分が太字になります。

「br」タグの詳細

改行をする際に用いられるHTMLの「br」タグについて深く探っていきます。

brタグの概要から見ていきましょう。

• 「br」タグとは何か
• 「br」タグの属性と非推奨の属性

「br」タグとは何か

「br」タグはHTMLの特殊なタグで、テキスト内に改行を挿入します。

このタグは自己終了型であり、通常は対になる終了タグがないのが特徴です。

Hello<br>World

ブラウザ上で「Hello」と「World」がそれぞれ別行に表示されます。

「br」タグの属性と非推奨の属性

「br」タグはその機能がシンプルであるため、属性を持ちません。

一方で、「br」タグを利用する際には注意が必要で、それが非推奨の属性に関わるものです。

例えば、「clear」属性はかつて「br」タグで利用されていたものの、現在ではCSSのフロート解除によって置き換えられています。

以下CSSでの実現例です。

<style>
  .float-left {
    float: left;
    width: 200px;
    height: 100px;
    background-color: red;
  }
  .clear-left {
    clear: left;
  }
</style>

<div class="float-left"></div>
<div class="clear-left"></div>

「br」タグの利用場面と例

「br」タグは単純なようでありながら、うまく使いこなすためには理解が必要です。

このセクションでは以下の内容を取り扱います。

• 「br」タグが必要な場面
• 単純な「br」の使用例

「br」タグが必要な場面

「br」タグは主にテキスト内で改行を必要とする場面で使用されます。

例えば、詩や歌詞を表示するとき、アドレスを記述する際など、特定の形式を保持する必要があるときに「br」タグを活用します。

しかし、一般的にはパラグラフの間に余白を挿入したい場合やセクションを分ける場合には「br」タグではなく「p」タグやその他のブロックレベルの要素を使うことが推奨されています。

これは、HTMLが構造を表現するための言語であるため、その意味に沿ったタグを使用することがベストプラクティスとされているからです。

<!-- brを使う例 -->
<p>詩や歌詞を表示する際には、<br>
改行を使用して行ごとに表示します。</p>

<p>また、アドレスを記述する場合にも<br>
改行を使用して行ごとに表示することがあります。<br>
例：<br>
〒123-4567<br>
東京都渋谷区</p>

<!-- pタグを使う例（推奨） -->
<p>詩や歌詞を表示する際には、パラグラフタグを使用して段落ごとに表示します。</p>

<p>また、アドレスを記述する場合にもパラグラフタグを使用して段落ごとに表示することがあります。</p>

<p>例：</p>
<p>〒123-4567</p>
<p>東京都渋谷区</p>

単純な「br」の使用例

以下に「br」タグの簡単な使用例を示します。

<p>これは<br>改行された<br>文章です。</p>

このHTMLコードは以下のようにブラウザに表示されます。

これは
改行された
文章です。

この例では、各「br」タグの位置で新たな行が始まっています。

「br」タグの活用方法

「br」タグはシンプルながらも、その活用方法にはいくつかのポイントがあります。

以下の内容について説明していきます。

• 基本的な「br」タグの使い方
• 「br」タグの適用例と実践

基本的な「br」タグの使い方

「br」タグは最もシンプルなHTMLの要素の一つで、特定の場所で改行を挿入する際に使用します。

そのため、「br」タグを使うときは、タグを挿入したい場所に <br> と記述します。

例えば、「こんにちは」を一行目に、「世界」を二行目に表示したい場合、次のように記述します。

<p>こんにちは<br>世界</p>

このコードをブラウザで表示すると、「こんにちは」と「世界」が二行に分けて表示されます。

一方、「br」タグを使わない場合、両方のテキストが同じ行に表示されます。

「br」タグの適用例と実践

「br」タグは主にテキスト内で改行が必要な場合に使用します。

具体的な使用例としては、詩や歌詞、連絡先などがあります。

それらのコンテンツでは、一行ごとに区切られていることが重要であり、「br」タグを用いることでその構造を再現できます。

例えば、以下のようなコードを考えてみましょう。

<p>
  キラキラ星よ<br>
  どんなに遠くにあっても<br>
  ダイヤモンドのように輝いて<br>
  空を見上げては思う
</p>

このコードでは、「br」タグが各行の終わりに挿入されており、その結果、各行が新しい行として表示されます。

「br」タグの注意点とアクセシビリティ

「br」タグは便利なツールでありますが、注意が必要な点がいくつかあります。

以下ではその点を説明し、またアクセシビリティの観点から「br」タグの使用についても解説します。

• 「br」タグの適切な使用法と注意点
• アクセシビリティの視点からの「br」タグの使用

「br」タグの適切な使用法と注意点

「br」タグはテキストブロック内での改行にのみ使用すべきであり、要素間のスペースを作るために使うべきではありません。

なぜなら「br」タグを使用して要素間にスペースを作ると、スタイルの一貫性を保つことが難しくなるからです。

要素間のスペースを作るのであれば、CSSのマージンやパディングを使用すべきです。

<style>
  .spacer {
    margin-bottom: 20px;
  }
</style>

<div>
  <p>要素1</p>
  <div class="spacer"></div>
  <p>要素2</p>
</div>

アクセシビリティの視点からの「br」タグの使用

「br」タグの使用には注意が必要です。

なぜなら「br」タグを使用すると、スクリーンリーダーはそれぞれの行を別々の情報として解釈し、その関連性が失われるからです。

代わりに、リスト(<li>)要素を使用することで、情報の関連性を保てます。

例えば、連絡先情報をリスト形式で表示すると、名前、住所、電話番号などが一つのグループとして認識され、関連性が明確になります。

<ul>
  <li>名前</li>
  <li>住所</li>
  <li>電話番号</li>
</ul>

「br」タグのスタイル付け

このセクションでは、「br」タグにスタイルを適用する方法について詳しく説明します。

また、「br」タグの使用を控えるべき場合についても触れていきます。

• CSSを用いた「br」タグのスタイル付け
• 「br」タグの使い過ぎについて

CSSを用いた「br」タグのスタイル付け

一般的に、「br」タグにはスタイルを直接適用することはできません。

なぜなら「br」タグはブロックレベル要素ではなく、インライン要素であり、その目的は改行を作成することだけであるからです。

しかし、例外的に一部のブラウザでは、「br」タグに対してCSSのプロパティを使用してスタイルを適用することが可能です。

例えば、「br」タグに対してdisplay:block;と指定すると、改行後に追加の空白行が挿入されます。

しかし、このような方法は推奨されません。

なぜなら、それは「br」タグの本来の目的から逸脱するものであり、また、全てのブラウザで同様に動作するわけではないからです。

「br」タグの使い過ぎについて

「br」タグの使い過ぎは、ウェブページの構造と意味を損なう可能性があります。

「br」タグはテキスト内の改行を作成するためのものであり、レイアウトを制御するためのものではないのです。

レイアウトの制御にはCSSを使用しましょう。

また、「br」タグの過度な使用は、スクリーンリーダーやテキストベースのブラウザーなど、特定のユーザーエージェントでのアクセシビリティにも影響を与えます。

したがって、「br」タグの使用は必要最小限に抑えることが推奨されます。

HTMLの改行方法の比較

この章では、「br」タグ以外にもHTMLで改行を表現する方法について詳しく見ていきましょう。

具体的には、「p」タグを使った方法とCSSを用いた改行の方法の2つに焦点を当てます。

• 「p」タグを使った方法
• CSSを用いた改行の方法

「p」タグを使った方法

「p」タグは段落を作成するためのHTMLの要素です。

これを用いて自然な改行を作ることができます。

たとえば、以下のように使用します。

<p>これは一つ目の段落です。</p>
<p>これは二つ目の段落で、前の段落と自然に分けられています。</p>

上記のように「p」タグを使用することで、各段落間に自動的に改行が入ります。

しかし、「br」タグと異なり、「p」タグはブロックレベルの要素であるため、同じ行に他の要素を置けません。

CSSを用いた改行の方法

CSSを用いて改行を制御することも可能です。

この方法は「br」タグや「p」タグとは異なり、より細かくスタイルを制御可能です。

具体的には、display: block;やmargin、paddingなどのCSSプロパティを使用して要素間のスペースを制御します。

<span style="display: block;">これはブロックレベルの要素です。</span>
<span style="display: block;">これも新しい行に表示されます。</span>

上記のようにCSSを使用すると、各要素間に新しい行を作成できます。

ただし、この方法はレイアウトの制御に適していて、単純なテキスト内の改行には「br」タグや「p」タグを使用することが一般的です。

ブラウザーの互換性と技術的概要

この章では、「br」タグのブラウザー間の互換性と技術的な詳細について深く掘り下げていきます。

特に、互換性の問題が起こる可能性とその対処法、そして仕様書としての公式ドキュメントについても触れていきます。

• 「br」タグのブラウザー間の互換性
• 「br」タグの技術的概要と仕様書

「br」タグのブラウザー間の互換性

「br」タグは全ての主要なブラウザーでサポートされており、基本的に互換性の問題はありません。

どのブラウザーでも「br」タグを用いた改行は正しく反映されます。

• Chrome
• Firefox
• Safari
• Edge

しかし、古いバージョンのブラウザー、特にInternet Explorerなどでは、一部のHTMLタグやCSSプロパティが完全にサポートされていないこともあります。

そのため、サイトの互換性を維持するためには、常にブラウザーの最新バージョンに対応したコーディングを心掛けることが重要です。

「br」タグの技術的概要と仕様書

「br」タグはHTML5の公式仕様書にも明記されています。

• 「br」タグの基本的な定義や使用方法
• 歴史的な背景など

また、「br」タグは空要素として扱われ、通常、終了タグを伴いません。

公式仕様書を読むことは、コーディングスキルを高める上で非常に有益です。

最新の情報を常に取得し、さらに深い理解を心がけましょう。

要素一覧とまとめ

この章では、これまでに学んだHTMLの主要な要素一覧を提供します。

新たな技術を学ぶことは難しいかもしれませんが、定期的に復習することで、理解と記憶が深まることでしょう。

要素名	説明
<html>	HTML文書のルート要素を定義します。
<head>	文書のヘッダー情報を含むセクションを定義します。
<title>	文書のタイトルを定義します。
<body>	文書の本文を定義します。
<h1> – <h6>	見出しを定義します。レベルによって見出しの重要度が異なります。
<p>	段落を定義します。
<a>	ハイパーリンクを作成します。
<img>	画像を表示します。
<ul>	順序のないリスト（箇条書き）を作成します。
<ol>	順序付きリスト（番号付きリスト）を作成します。
<li>	リストの項目を定義します。
<div>	ブロックレベルの要素で、コンテンツをグループ化するために使用します。
<span>	インラインレベルの要素で、コンテンツの一部をグループ化するために使用します。
<table>	表を作成します。
<tr>	表の行を定義します。
<td>	表のデータセルを定義します。
<th>	表のヘッダーセルを定義します。
<form>	フォームを作成します。
<input>	フォーム内の入力フィールドを作成します。
<button>	ボタンを作成します。
<label>	入力フィールドのラベルを定義します。
<select>	ドロップダウンリストやリストボックスを作成します。
<textarea>	テキスト入力エリアを作成します。
<iframe>	インラインフレームを作成し、他のウェブページを埋め込むことができます。
<header>	ページのヘッダーを定義します。
<footer>	ページのフッターを定義します。
<nav>	ナビゲーションメニューを定義します。
<section>	ドキュメント内の独立したセクションを定義します。
<article>	独立したコンテンツを定義します。
<aside>	サイドバーや注釈などの補足情報を定義します。

まとめ

「br」タグは、HTML文書内で改行を行うための便利なツールです。

しかし、その使用は控えめに行い、主に詩や住所などのテキスト表示で利用することが推奨されています。

また、「br」タグの仕様は公式のHTML仕様書に詳細に記載されており、それを参照することでさらに理解を深められるでしょう。