【イラスト付き】【初心者向け】HTMLのbrタグとは？基礎から使い方まで徹底解説

ねぇねぇ、ブルーちゃん。HTMLのコードで「br」っていう文字をよく見かけるんだけど、これって何なのかな？

なんでbrって書くのかな？何か意味があるの？

ブルーちゃん、brタグについて詳しく教えて！

まずはbrタグの基本的なことを、以下4つのポイントから説明していくね。

まずは、brタグの意味と由来から見ていこう！

brとは「Break Line（改行）」の略で、HTMLで改行を入れるための基本的なタグだよ。

テキストエディタでEnterキーを押すように、Webページ上で改行したい場所に挿入すると、その位置で文章が改行されるんだ。

シンプルな機能だけど、文章の読みやすさを整えるのに欠かせない要素なんだよ。

HTMLのおもしろいところは、テキストエディタでEnterキーを押して入れた改行を、ブラウザが自動的に無視しちゃうところなんだ。

これはHTMLの仕様で、複数の空白や改行を1つの空白として扱うんだよ。

だからこそ、改行したいときにはbrタグが必要になるんだよね。

brタグを使うと、ブラウザに「ここで必ず改行して！」って指示できるんだ。

brタグは<br>や<br />という形式で書くんだよ。

HTML5では、<br>という書き方が推奨されているね。

使い方はシンプルで、改行したい場所に直接挿入するだけ！

例えば、「こんにちは<br>世界」と書くと、「こんにちは」と「世界」が別々の行に表示されるんだ。

複数行の改行が必要な場合は、brタグを連続して使うこともできるよ。

brタグがpタグのように閉じタグを必要としない理由は、その役割が「その場所で改行する」というシンプルな動作だけだからなんだ。

つまり、開始と終了の概念が必要ない空要素（Empty Element）の1つなんだよ。

この特徴のおかげで、コードがすっきりして見やすくなるんだ。

以下4つの使い方が代表的だよ。

うん！それじゃあ、それぞれの使い方について、具体的な例を交えながら詳しく説明していくね！

住所や連絡先の表示には、brタグが最適なんだよ。

郵便番号、都道府県、市区町村をそれぞれ改行することで、視認性が格段に上がるんだ。

例えば、「〒100-0001<br>東京都千代田区千代田1-1」というように使うと、住所が見やすく整理されるね。

電話番号やFAX番号も同様で、情報の種類ごとに改行を入れることで、ユーザーが必要な情報をすぐに見つけられるようになるんだ。

詩や歌詞の表示には、行の区切りが重要なんだ。

brタグを使うと、作者が意図した通りの改行位置を維持できるよ。

例えば、短歌や俳句のような定型詩では、5-7-5や5-7-5-7-7のリズムを視覚的に表現できるね。

フォームでは、入力項目の配置が重要なんだ。

brタグを使って、ラベルと入力欄を適切に配置することで、ユーザーの入力ミスを減らせるよ。

名前、メールアドレス、電話番号など、それぞれの入力項目の間にbrタグを入れれば、視覚的な区切りができて入力しやすくなるんだ。

スマートフォンから入力することも考えると、区切りの有無は使いやすさに直結するね。

スマートフォンでは画面が小さいから、改行の使い方に気をつける必要があるんだ。

必要以上にbrタグを使うと、スクロールが多くなりすぎて使いづらくなっちゃうよ。

代わりにレスポンシブデザインの技術と組み合わせて、画面サイズに応じて適切な改行を設定するのがポイントだよ。

これで、どのデバイスでも見やすい表示を実現できるね。

いい質問だね！実は、brタグとpタグの使い分けは、読みやすいWebページを作る上でとても重要なポイントなんだ。

主に、以下4つの観点から違いを理解する必要があるよ。

それじゃあ、これらの違いについて、具体的に見ていこう！

brタグとpタグは、見た目は似ているけど役割が全然違うんだよ。

brタグは単純な改行を入れるだけなんだけど、pタグは段落として文章を区切るんだ。

pタグを使うと、上下に自動的に余白が追加されて、文章の区切りがはっきりするね。

これは文章の論理的な構造を作る上で重要なんだ。

小説や記事なら段落（pタグ）、住所や連絡先なら改行（brタグ）という使い分けがベストだよ。

検索エンジンは、pタグで区切られた段落を意味のある文章のまとまりとして認識するんだ。

単なる改行のbrタグと違って、pタグは文章の構造を示す要素として扱われるよ。

特に長い記事を書くときは、適切にpタグで段落を区切ることで、検索エンジンに文章の構造をしっかり伝えられるんだ。

スマートフォンやタブレットなどで画面サイズが変わったときの動きが、brタグとpタグで違ってくるんだ。

brタグは固定の改行だから、画面サイズが変わっても改行位置は変わらないよ。

でもpタグは、画面サイズに応じて段落の表示が自動調整されるんだ。

pタグは、CSSでスタイルを細かく設定できるんだ。

例えば、段落の余白やフォントサイズ、行間など、見た目を自由にカスタマイズできるね。

一方、brタグは単純な改行だから、CSSでできることは限られているんだよ。

デザインにこだわりたい場合は、pタグを使って段落ごとにスタイルを設定するのがおすすめだね。

これで見やすさとデザイン性の両方を実現できるんだ。

brタグについてまとめるよ。

brタグは一見シンプルな改行用のタグだけど、適切に使えばWebページの可読性を大きく向上できるよ。

そうだね！ぜひ、目的に応じて適切なタグを選択してね！