brタグの使い方【HTMLリファレンス】

2024-06-01

HTMLのbrタグは、ウェブページでテキストを改行するための便利なツールです。

このガイドでは、brタグの基本的な使い方から実践的な使用例、注意点、そして代替手段までを詳しく解説します。

初心者の方でも理解しやすいように、具体的なサンプルコードとその実行結果を交えて説明しますので、ぜひ参考にしてください。

目次から探す

brタグとは

brタグの基本概要

brタグは、HTMLにおいて改行を挿入するためのタグです。

通常、HTMLではテキストをそのまま書くと、ブラウザは改行を無視して連続して表示します。

しかし、brタグを使用することで、意図的に改行を挿入することができます。

これは、特に詩や住所、フォームのレイアウトなど、特定の場所で改行が必要な場合に非常に便利です。

brタグの基本的な使い方

改行の基本

HTMLでは、テキストをそのまま書くと、改行やスペースが無視されてしまいます。

例えば、以下のように書いた場合：

これはテストです。
これは新しい行です。

ブラウザ上では次のように表示されます：

このように、改行が無視されてしまいます。

ここでbrタグを使うと、意図した通りに改行を挿入することができます。

brタグのシンタックス

brタグのシンタックスは非常にシンプルです。

以下のように書きます：

これはテストです。<br>これは新しい行です。

このように書くことで、ブラウザ上では次のように表示されます：

brタグは自己終了タグであり、閉じタグは必要ありません。

HTML5では、<br>と書くだけで十分です。

brタグの使用例

具体的な使用例をいくつか見てみましょう。

住所の表示：

〒123-4567<br>東京都新宿区西新宿1-1-1<br>新宿ビル101号室

ブラウザ上では次のように表示されます：

詩や歌詞の表示：

春はあけぼの<br>
やうやう白くなりゆく山ぎは<br>
少しあかりて<br>
紫だちたる雲の細くたなびきたる

ブラウザ上では次のように表示されます：

このように、brタグを使うことで、テキストの表示を意図した通りに調整することができます。

brタグの実践的な使用例

テキストの改行

brタグは、テキストの中で改行を行いたい場合に非常に便利です。

例えば、住所や詩など、特定の場所で改行を入れたい場合に使用します。

以下は、brタグを使ってテキストを改行する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>brタグの例</title>
</head>
<body>
    <p>これは1行目です。<br>これは2行目です。</p>
</body>
</html>

上記のコードをブラウザで表示すると、以下のように改行が反映されます。

フォームのレイアウト調整

フォームのレイアウトを調整する際にもbrタグは役立ちます。

例えば、入力フィールドやボタンを改行して配置したい場合に使用します。

以下は、brタグを使ってフォームのレイアウトを調整する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>フォームの例</title>
</head>
<body>
    <form>
        <label for="name">名前:</label>
        <input type="text" id="name" name="name"><br>
        <label for="email">メール:</label>
        <input type="email" id="email" name="email"><br>
        <input type="submit" value="送信">
    </form>
</body>
</html>

上記のコードをブラウザで表示すると、以下のようにフォームが改行されて表示されます。

詩や歌詞の表示

詩や歌詞など、特定のフォーマットでテキストを表示したい場合にもbrタグは有効です。

以下は、詩を表示する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>詩の例</title>
</head>
<body>
    <p>
        春はあけぼの。<br>
        やうやう白くなりゆく山ぎは、<br>
        少しあかりて、<br>
        紫だちたる雲の細くたなびきたる。
    </p>
</body>
</html>

上記のコードをブラウザで表示すると、以下のように詩が改行されて表示されます。

このように、brタグを使うことで、テキストの表示を柔軟に調整することができます。

特に、特定のフォーマットでテキストを表示したい場合や、フォームのレイアウトを調整したい場合に非常に便利です。

brタグの注意点

過剰な使用のリスク

brタグは非常に便利なタグですが、過剰に使用するとコードが読みづらくなり、メンテナンスが難しくなることがあります。

特に、複数のbrタグを連続して使用することで、意図しないレイアウトの崩れが発生する可能性があります。

例えば、以下のようにbrタグを連続して使用すると、見た目は整っているように見えますが、コードが煩雑になります。

<p>これは段落です。<br><br><br>ここに改行がたくさんあります。</p>

このような場合、CSSを使用して適切なマージンやパディングを設定する方が、コードの可読性が向上し、メンテナンスも容易になります。

アクセシビリティへの影響

brタグを多用すると、スクリーンリーダーなどの支援技術を使用しているユーザーにとって、コンテンツの理解が難しくなることがあります。

スクリーンリーダーはbrタグを「改行」として認識しますが、連続するbrタグは不自然な読み上げを引き起こす可能性があります。

例えば、以下のようなコードはスクリーンリーダーにとって理解しづらいです。

<p>これは段落です。<br><br>次の行です。</p>

このような場合、適切なHTMLタグ(例えば、pタグやdivタグ)を使用してコンテンツを構造化することが推奨されます。

SEOへの影響

brタグの過剰な使用は、SEO(検索エンジン最適化)にも悪影響を及ぼす可能性があります。

検索エンジンは、ページの構造を理解するためにHTMLタグを解析しますが、brタグが多すぎるとページの構造が不明瞭になり、検索エンジンがコンテンツを正しく評価できなくなることがあります。

例えば、以下のようなコードはSEOにとって不利です。

<p>重要なキーワード<br>さらに重要なキーワード<br>もっと重要なキーワード</p>

このような場合、適切な見出しタグ(h1, h2, h3など)や段落タグ(pタグ)を使用して、コンテンツを明確に区分けすることが重要です。

<h2>重要なキーワード</h2>
<p>さらに重要なキーワード</p>
<p>もっと重要なキーワード</p>

このようにすることで、検索エンジンがページの内容を正確に理解しやすくなり、SEO効果が向上します。

以上のように、brタグは便利なツールですが、適切に使用することが重要です。

過剰な使用を避け、アクセシビリティやSEOに配慮したコーディングを心がけましょう。

brタグの代替手段

brタグは非常に便利ですが、他にも改行を実現する方法があります。

ここでは、CSSを使った改行方法や、pタグとの比較、その他のHTMLタグとの併用について解説します。

CSSでの改行

CSS(Cascading Style Sheets)を使って改行を実現する方法もあります。

CSSを使うことで、より柔軟にデザインをコントロールすることができます。

displayプロパティを使った改行

CSSのdisplayプロパティを使って、要素をブロックレベルに変更することで改行を実現できます。

例えば、以下のようにspanタグを使って改行を行うことができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CSSでの改行</title>
    <style>
        .break {
            display: block;
        }
    </style>
</head>
<body>
    <p>これは<span class="break">CSSを使った</span>改行の例です。</p>
</body>
</html>

この例では、spanタグにdisplay: block;を適用することで、改行が実現されています。

marginプロパティを使った改行

CSSのmarginプロパティを使って、要素間にスペースを追加することもできます。

以下の例では、divタグを使って改行を行っています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CSSでの改行</title>
    <style>
        .break {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="break">これはCSSを使った改行の例です。</div>
    <div>次の行に表示されます。</div>
</body>
</html>

この例では、divタグにmargin-bottom: 20px;を適用することで、改行とスペースが追加されています。

pタグとの比較

brタグとpタグはどちらも改行を実現するために使われますが、それぞれの使い方や特性には違いがあります。

brタグの特徴

インライン要素の中で改行を行うために使用される
改行のみを行い、段落の意味を持たない
簡単に改行を追加できるが、過剰に使用するとコードが読みにくくなる

pタグの特徴

ブロックレベル要素であり、段落を作成するために使用される
段落全体を囲むため、意味的なまとまりを持つ
自動的に前後にスペースが追加されるため、視覚的に段落が区別される

以下は、brタグとpタグを使った例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>brタグとpタグの比較</title>
</head>
<body>
    <p>brタグを使った例:</p>
    <p>これは<br>brタグを使った<br>改行の例です。</p>
    <p>pタグを使った例:</p>
    <p>これはpタグを使った改行の例です。</p>
    <p>次の段落に表示されます。</p>
</body>
</html>

この例では、brタグを使った改行とpタグを使った改行の違いがわかります。

その他のHTMLタグとの併用

brタグは他のHTMLタグと併用することで、より複雑なレイアウトやデザインを実現することができます。

liタグとの併用

リストアイテム(liタグ)の中で改行を行いたい場合、brタグを使うことができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>liタグとの併用</title>
</head>
<body>
    <ul>
        <li>アイテム1<br>詳細情報</li>
        <li>アイテム2<br>詳細情報</li>
    </ul>
</body>
</html>

この例では、liタグの中でbrタグを使って改行を行っています。

tableタグとの併用

表(tableタグ)の中で改行を行いたい場合も、brタグを使うことができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>tableタグとの併用</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>セル1<br>改行</td>
            <td>セル2<br>改行</td>
        </tr>
    </table>
</body>
</html>