【HTML】br要素の使い方【文を改行します】

Program

〈br〉要素を使えば、文を改行できます。

br要素の基本的な使い方

まずは、以下のプログラムとブラウザでの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>br要素</title>
</head>
<body>
    <p>
    〒162-0832<br>
    東京都新宿区<br>
    岩戸町100
    </p>
</body>
</html>

〈body〉要素の中に、「文のかたまり(段落)」を示す〈p〉要素があります。

〈p〉要素の中には、「〒162-0832」、「東京都新宿区」、「岩戸町100」の3つのフレーズがあります。

そして、「〒162-0832」と「東京都新宿区」の各フレーズの末尾には、〈br〉要素が記述されています。

このため、ブラウザでの表示結果の通り、「〒162-0832」の末尾、「東京都新宿区」の末尾で、改行が行われて表示されています。

このように、文の中で改行したい位置に〈br〉要素を挿入することで、その挿入した位置で改行が行われて表示されるようになります。

br要素を使わない場合は?

では、同様のプログラムで、〈br〉要素を使わないとどうなるか、見てみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>br要素</title>
</head>
<body>
    <p>
    〒162-0832
    東京都新宿区
    岩戸町100
    </p>
</body>
</html>

プログラムに示す通り、先ほど使用していた〈br〉要素を削除してみました。

そうすると、ブラウザでの表示結果は、「〒162-0832」、「東京都新宿区」、「岩戸町100」の3つのフレーズが改行されることなく、横一列に並び、一文のように表示されます。

各種ブラウザでの表示結果

【HTML】Google ChromeMicrosoft EdgeSafariFirefoxOpera
br要素
〇:サポートあり、△:制限あり、×:サポートなし、?:不明

以上、br要素の使い方について、ご参考になさってくださいね。

タイトルとURLをコピーしました