HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのbrタグとは？改行の設定方法を実例付きで解説

HTMLの<br>タグは、テキスト内に強制的な改行（ラインブレーク）を挿入するためのタグです。段落タグである<p>とは異なり、<br>タグを使うことで、新しい段落を作らずに1行分だけ改行できます。終了タグが不要な空要素（void要素）である点も特徴です。

この記事では、<br>タグの基本的な使い方を、実際のコード例と表示結果をもとにわかりやすく解説します。

コード例：brタグで改行を設定する

以下は、HTMLで<br>タグを使用して改行を設定するサンプルコードです。

<!DOCTYPE html>
<html>
<body>
    <h2>デモ見出し</h2>
    <p>これはデモ用のテキストです！次の段落は、2回の改行の後に表示されます。</p> <br><br>
    <p>ここにはデモ用の段落を設定しています。ここにはデモ用の段落を設定しています。
    ここにはデモ用の段落を設定しています。ここにはデモ用の段落を設定しています。
    次の行は、1回の改行の後に表示されます。</p><br>
    <p>これはデモ用のテキストです！</p>
</body>
</html>

表示結果

上記のコードをブラウザで表示すると、<br>タグが挿入された位置で改行されていることが確認できます。

コードのポイント解説

上記の例では、<br>タグを活用して改行を制御しています。まず、次の段落の前に2回の改行を設定するために、<br>タグを2つ連続して記述しています。

<p>これはデモ用のテキストです！次の段落は、2回の改行の後に表示されます。</p> <br><br>

続いて、次の行との間には1回だけの改行を設定するため、<br>タグを1つのみ記述しています。

<p>ここにはデモ用の段落を設定しています。ここにはデモ用の段落を設定しています。ここにはデモ用の段落を設定しています。ここにはデモ用の段落を設定しています。次の行は、1回の改行の後に表示されます。</p><br>
<p>これはデモ用のテキストです！</p>

まとめ

<br>タグは、連続して記述した数だけ改行幅が広がるというシンプルな仕組みです。ただし、レイアウト調整のために乱用するとHTMLの構造が読みにくくなるため、段落の区切りには<p>タグを使い、詩や住所など意味的に改行が必要な箇所でのみ<br>タグを使用するのがベストプラクティスとされています。

  1. HTMLのfontタグとは？色・書体・サイズの指定方法を解説

    HTMLの<font>タグは、文字の色・フォント（書体）・サイズを指定するために使用されるタグです。主な属性は以下のとおりです。 color: 文字の色を指定します。 face: フォントの書体（フォントファミリー）を指定します。 size: 文字サイズを指定します。 注意：<font>タグはHTML5では廃止されており、最新の標準規格ではサポートされていません。現行のWebページでは、CSSの「color」「font-family」「font-size」などのプロパティを使ってスタイルを指定することが推奨されています。 それでは、HTMLで<font>

  2. HTMLの<dfn>タグとは？定義用語のマークアップ方法を実例付きで解説

    HTMLの<dfn>タグは、専門用語や略語など「定義の対象となる語」が文書内で最初に登場する箇所を示すための要素です。多くのブラウザでは、<dfn>タグで囲まれた部分は斜体（イタリック体）で表示されます。 それでは、<dfn>タグの具体的な実装例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>MCAの科目一覧</h2> <p><dfn title="Master of Computer Applications"