【HTML Living Standard】br要素の使い方
br要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
brオブジェクトは、HTMLドキュメント内で強制的に改行を挿入するために使用されるオブジェクトです。この要素は、テキストの流れを中断し、その直後にある内容を新しい行から表示させます。HTMLでは、通常、ブラウザはテキストを自動的に整形し、必要に応じて改行を行いますが、brオブジェクトを使用することで、開発者が意図的に改行のポイントを制御できます。
主な用途としては、詩の各行を区切る場合や、住所の各要素を新しい行に配置する場合など、改行自体が意味を持つ文脈で利用されます。例えば、郵便番号、住所、建物名といった情報の区切りにbrオブジェクトを挟むことで、視覚的に読みやすい表示を実現します。これは、改行がコンテンツの一部として不可欠な場合に特に有効です。
一方で、brオブジェクトは、単に視覚的な空白や段落間の余白を調整する目的で使うべきではありません。そのような視覚的レイアウトの調整は、CSS（Cascading Style Sheets）のmarginやpaddingといったプロパティを用いて行うのが適切です。brオブジェクトを多用すると、ドキュメントのセマンティクス（意味）が損なわれ、コンテンツの管理や、スクリーンリーダーなどの補助技術を利用するユーザーにとってのアクセシビリティの低下につながる可能性があります。
このオブジェクトは空要素であり、終了タグを持たないのが特徴です。そのため、<br>という形式で記述します。HTML Living Standardに準拠しており、テキストブロック内で意味のある改行が必要な場合にのみ使用することが推奨されています。適切に使用することで、情報の構造を保ちつつ、読みやすいドキュメントを作成できます。
構文(syntax)
1<br>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLのbrタグで改行する
1<!DOCTYPE html> 2<html> 3<head> 4 <title>brタグのサンプル</title> 5</head> 6<body> 7 <h1>brタグの基本的な使い方</h1> 8 <p> 9 この行は最初のテキストです。<br> 10 <!-- brタグはテキスト内で強制的に改行を挿入します。 --> 11 次の行はbrタグによって改行されました。<br> 12 さらに次の行もbrタグによって改行されました。 13 </p> 14 <p> 15 brタグは、詩や住所のように、意味的に改行が必要な場所で利用されます。 16 <br> 17 例えば、住所の各行の区切りなどに使えます。 18 </p> 19</body> 20</html>
HTMLのbrタグは「Break Rule（改行）」の略で、Webページ上のテキスト表示において、強制的に改行を挿入するための要素です。このタグは、テキストブロック内で新しい行を開始したい場合に利用され、特に詩や歌詞、住所の各行など、意味的に改行が意図されているコンテンツに適しています。単に見た目の改行のためではなく、コンテンツの構造上、その位置で改行することが不可欠な場合に用いられます。
brタグは、引数を指定する必要がなく、また何らかの値を返す戻り値も持ちません。そのため、開始タグのみで完結する「空要素（Void element）」として扱われます。サンプルコードでは、<p>タグの内部で<br>タグが使用されており、その位置でテキストが強制的に次の行へ移動していることが確認できます。例えば、「この行は最初のテキストです。」の直後に<br>タグがあることで、それに続く「次の行はbrタグによって改行されました。」というテキストは必ず新しい行から表示されます。このように、brタグはテキストのレイアウトを意味的に制御し、情報の区切りを明確にする役割を果たします。
brタグは、文章中で意味的に改行が必要な場合にのみ使用します。例えば、詩の行区切りや住所の各行など、テキストの一部として強制的な改行が不可欠な場面で利用します。
見た目のレイアウト調整や段落の区切りを目的として、brタグを多用したり連続して使用したりすることは避けてください。単なる見た目の改行や余白の調整には、CSS（スタイルシート）を用いるのが正しい方法です。HTMLの構造とCSSの表現は分けて考えることが重要です。
また、brタグは閉じタグが不要な「空要素」であり、<br>と記述します。HTML文書の構造と意味を正しく保つため、brタグの乱用は避け、段落には<p>タグを使うなど、適切なタグの使い分けを心がけてください。
HTMLのbrタグで改行する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>brタグのサンプル</title> 7</head> 8<body> 9 <h1>brタグの利用例</h1> 10 11 <p> 12 これは最初の文章です。<br> 13 <!-- brタグは、テキストの途中で強制的に改行を挿入します。 --> 14 brタグを使用しない場合、この文章は1行で表示されますが、<br> 15 brタグによってここで改行され、次の行に移ります。 16 </p> 17 18 <p> 19 住所などの意味的に改行が必要な場合にも使われます。<br> 20 〒100-0005<br> 21 東京都千代田区丸の内1-9-2<br> 22 グラントウキョウサウスタワー 23 </p> 24</body> 25</html>
HTMLのbr要素は、「break（改行）」の略で、テキストの途中で強制的に改行を挿入するために使用されます。この要素は、単に表示上の行を分ける役割を持ち、文章の意味的な区切りを作る段落（<p>要素など）とは異なります。
br要素は、何か特定の情報を入力として受け取る「引数」や、処理結果を返す「戻り値」を持ちません。これは、brが単一の目的、つまり指定された位置で改行を指示するだけの要素であり、追加のデータや計算結果を必要としないためです。
提供されたサンプルコードでは、br要素の利用例が分かりやすく示されています。最初の段落では、「これは最初の文章です。」の後と、「brタグを使用しない場合、この文章は1行で表示されますが、」の後にbrが挿入されています。これにより、その位置でテキストが改行され、文章が複数行にわたって表示されることを確認できます。
次の段落では、住所の表示例が挙げられています。住所のような情報は、各行が意味的に繋がりを持つ一つのまとまりですが、視認性を高めるために行を分けたい場合にbrが非常に有効です。brを使用することで、各要素を新しい行に表示しつつ、全体としては一つの住所という情報として表現することが可能です。br要素は、テキストの表示レイアウトを細かく調整する際に役立つ、基本的ながら重要な要素です。
brタグは、文章中で意味的に改行が必要な場合にのみ使用する要素です。例えば、住所や詩のように、その場所での改行が内容の一部である場合に適しています。しかし、単に見た目のレイアウトを調整したり、要素間に余白を空ける目的で多用することは避けてください。HTMLは文書の構造と意味を示すものであり、見た目のスタイルはCSS（スタイルシート）で制御するのが原則です。レイアウトのために連続してbrタグを使用すると、メンテナンスが難しくなったり、スクリーンリーダーなどのアクセシビリティツールで正しく読み上げられない原因となることがあります。適切な場面での利用を心がけましょう。