【HTML】hr・br・wbr の使い方｜区切り線と改行を正しくマークアップする

HTML には、文章の「区切り」や「改行」を表すための小さな要素がいくつかあります。この記事では、話題の切れ目を表す <hr>、文中の改行を表す <br>、そして長い単語やURLで折り返してよい位置を示す <wbr> の3つを取り上げます。見た目が似ていて混同しやすい要素ですが、それぞれ意味と使いどころがはっきり違います。初心者の方が「なんとなく線を引きたい」「とりあえず改行したい」で誤用しがちなポイントも、具体例とあわせて整理していきます。

3つの要素はそれぞれ何を表すのか

まずは3つの要素が「何のためのもの」なのかを押さえておきましょう。いずれも閉じタグを持たない空要素（中身を持たない要素）です。用途と意味を対応させると次のようになります。

共通しているのは、どれも「見た目のため」ではなく「文書の構造や意味を表すため」の要素だということです。この意識を持つだけで、次に説明する誤用をかなり防げます。

hr は「線」ではなく「話題の区切り」

<hr> は horizontal rule（水平線）の略で、多くのブラウザでは灰色の細い横線として表示されます。そのため「線を引きたいから hr を置く」という使い方をしてしまいがちですが、HTML の仕様上、<hr> が表すのは段落レベルでのテーマの区切りです。たとえば、ある話題を書き終えて別の話題に移るとき、章と章の切れ目を示すときに使います。

逆に、見た目として単に飾りの線を入れたいだけなら、<hr> を使うのは適切ではありません。その場合は要素の border-bottom などCSSで線を描くほうが意味的に正しくなります。<hr> は「意味の区切り」があるところにだけ置く、と覚えておきましょう。

次のデモでは、話題が切り替わる位置に <hr> を置き、CSSで見た目をグラデーションの線に変えています。CSSタブを開くと、border を消して自由に装飾できることが分かります。

<section>
  <h2>前半のトピック</h2>
  <p>ここまでが1つ目の話題です。</p>
</section>

<hr>

<section>
  <h2>後半のトピック</h2>
  <p>ここからは別の話題に切り替わります。</p>
</section>

/* hr はデフォルトで細い横線。CSS で見た目を自由に変えられる */
hr {
  border: none;              /* ブラウザ標準の枠線を消す */
  height: 2px;               /* 線の太さ */
  margin: 32px 0;            /* 前後の余白 */
  background: linear-gradient(
    to right,
    transparent,
    #007bff,
    transparent
  );
}

section h2 {
  font-size: 18px;
  color: #333;
}

section p {
  color: #555;
}

なお、<hr> はかつて size や color といった属性で見た目を指定していましたが、これらは現在の HTML では廃止されています。装飾はすべてCSSで行うのが今の標準です。

br は「意味のある改行」だけに使う

<br> は文中で行を折り返す（改行する）ための要素です。ポイントは、改行そのものが内容の一部として意味を持つ場合にだけ使うということです。代表的な例が住所や郵便番号、詩や俳句、歌詞のように「この位置で行が変わることに意味がある」テキストです。

次のデモは、1つの住所を1つの段落にまとめ、その中を <br> で行分けした例です。住所全体は意味的にひとかたまりなので、複数の段落に分けるのではなく、1つの <p> の中で改行するのが自然です。

<p>〒100-0001<br>東京都千代田区千代田1-1<br>weboolビル 3階</p>

<p>上の住所は1つの段落の中で br を使って改行しています。<br>このように、意味的に「ひとかたまり」の情報の中で行を分けたいときに br を使います。</p>

p {
  line-height: 1.9;
  color: #333;
}

段落を分けたいときは br ではなく p

初心者がやりがちなのが、話が変わる段落と段落のあいだを <br><br> のように <br> を並べて空けるやり方です。これは避けましょう。別々の話題や段落は、それぞれ独立した <p> 要素として書くのが正しいマークアップです。次のように比べると違いが分かります。

<!-- 悪い例：br で段落の間隔を空けている -->
<p>1つ目の話です。<br><br>2つ目の話です。</p>

<!-- 良い例：話ごとに p で分ける -->
<p>1つ目の話です。</p>
<p>2つ目の話です。</p>

段落を <p> で正しく分けておけば、段落どうしの余白はCSSの margin で調整できますし、スクリーンリーダーなどの支援技術も「ここで段落が変わった」と正しく認識できます。<br> を余白づくりに使うと、見た目は似ていても文書の構造が壊れてしまいます。「行間を空けたい」だけなら <br> ではなくCSSの出番だ、と切り分けて考えるのがコツです。

wbr で長いURLや英単語の折り返し位置を指定する

<wbr> は Word Break Opportunity の略で、「もし折り返しが必要になったら、ここで折り返してよい」という位置をブラウザに伝える要素です。<br> と違って必ず改行するわけではなく、あくまで折り返してもよい候補の位置を示すだけです。幅が足りていれば何も起こらず、狭くなって折り返しが必要になったときにだけ、指定した位置で改行されます。

これが役立つのが、途中に空白のない長いURLや英単語です。日本語の文章は文字の切れ目で自然に折り返せますが、https://example.com/very/long/path/... のような文字列は空白がないため、狭い領域では折り返せずにレイアウトからはみ出してしまうことがあります。区切りのよい位置（スラッシュの前など）に <wbr> を入れておくと、そこで折り返せるようになります。

<h3>wbr なし（折り返せず、はみ出す）</h3>
<p class="box">https://example.com/very/long/path/to/some/article/2026/report.html</p>

<h3>wbr あり（区切りのよい位置で折り返す）</h3>
<p class="box">https://example.com/very<wbr>/long<wbr>/path<wbr>/to<wbr>/some<wbr>/article<wbr>/2026<wbr>/report.html</p>

.box {
  width: 240px;             /* 狭い幅で折り返しの違いを確認 */
  border: 1px solid #ddd;
  padding: 8px 12px;
  font-family: monospace;
  color: #333;
}

h3 {
  font-size: 15px;
  color: #007bff;
  margin-top: 20px;
}

プレビューの幅を狭くして見ると、<wbr> がない上の枠は文字列がはみ出したり不自然な位置で切れたりするのに対し、<wbr> を入れた下の枠はスラッシュの手前できれいに折り返しているのが分かります。ここで大切なのは、<wbr> は改行を挿入してもその位置に空白やハイフンを追加しないという点です。URLをコピーしても余計な文字が混ざらないので、URLの折り返しに向いています。

wbr と CSS の折り返しは役割が違う

「長い文字列の折り返し」と聞くと、CSSの overflow-wrap や word-break を思い出す方もいるかもしれません。これらは要素全体に対して「あふれそうなら途中でも折り返してよい」というルールをまとめて指定するCSSのプロパティです。一方 <wbr> は特定の1か所に「ここで折り返してよい」という目印をHTML側で埋め込むものです。

どちらか一方が正解というわけではなく、狙いが違います。折り返し位置を自分で意図してコントロールしたい（スラッシュの前で切りたい、この単語の区切りで折りたい）ときは <wbr>、位置は問わずとにかくあふれさせたくないときはCSSの overflow-wrap: anywhere などが向いています。両方を組み合わせて使うこともできます。

3要素の使い分けを1枚で整理する

最後に、どういうときにどれを使うかを判断できるよう、典型的な場面と選ぶべき要素を並べておきます。迷ったら「見た目のためか、意味のためか」を思い出してください。

まとめ

<hr>・<br>・<wbr> はどれも小さな要素ですが、それぞれ役割がはっきり分かれています。<hr> は水平線を引くためではなく、話題（テーマ）の区切りを表す要素で、見た目はCSSで整えます。<br> は住所や詩のように改行そのものに意味がある箇所だけに使い、段落を分ける目的や余白づくりには使いません。段落は <p> で分け、余白はCSSで調整します。<wbr> は長いURLや英単語で折り返してよい位置をピンポイントで指定でき、CSSの折り返しプロパティとは狙いが異なります。「見た目のためか、意味のためか」を意識して選ぶと、読みやすく壊れにくいマークアップになります。

参考ページ

• <hr>: 主題区切り（水平線）要素 – HTML | MDN
• <br>: 改行要素 – HTML | MDN
• <wbr>: 改行機会要素 – HTML | MDN