HTMLで文章のレイアウトを調整する際によく使う <hr> タグと <br> タグ。
どちらも「閉じタグ（</hr> や </br>）」を持たない特殊なタグ（空要素）だが、その持つ「意味（セマンティクス）」は全く異なる。後から見返したときに迷わないための個人メモ。
1. 基本仕様とそれぞれの役割
| タグ | 正式名称 | 役割（意味） | 画面での既定の見え方 |
<hr> | Horizontal Rule | 話の**「テーマの切り替え（区切り）」**を表す | 横一線の区切り線が入る |
<br> | Break | 文章の**「改行」**を表す | 行が変わり、次の行からスタートする |
① テーマを切り替える <hr>
単なる「デザインとしての線」ではなく、「ここで話のテーマがガラッと変わります」という区切り（段落レベルのテーマのブレイク）を意味する。
HTML
<p>ここまでが前回のあらすじや、導入部分のテキストです。</p>
<hr> <p>ここから本題の、具体的な実装方法についての解説が始まります。</p>
② 文章を改行する <br>
詩や住所の表記など、「同じ段落内だけど、文脈上どうしてもここで改行したい」という場合に使用する。
HTML
<p>
〒123-4567<br>
東京都渋谷区〇〇 1-2-3<br>
〇〇ビル 4階
</p>
2. 実装時の重要規則（Tips / 注意点）
ルール1：見た目の調整（余白作り）のために使わない
これが最も間違いやすいNGパターン。デザイン上の理由だけでこれらのタグを乱用してはいけない。
- ❌ 悪い例（隙間を空けたいからと
<br>を連打する）：
HTML<p>文章の終わりです。</p> <br><br><br> <p>次の文章です。</p>marginやpaddingを使って調整するのが鉄則。 - ❌ 悪い例（ただの「飾り線」として
<hr>を使う）：
話がつながっているのに、デザインとして線を入れたいからという理由で<hr>を挟むのはセマンティクス的に誤り。
対策： 単に線を引きたいだけなら、CSSのborder-bottomなどで装飾する。
ルール2：どちらも「閉じタグ」は不要
<hr> と <br> は、中にテキストを挟む必要がない「空要素（Void element）」と呼ばれるタグ。そのため、</hr> や </br> といった閉じタグは書かない。
※古いXHTMLの書き方（<hr /> などのスラッシュ付き）も現在のHTML5では不要だが、書いてあっても動作上の問題はない。
まとめ（振り返り用チェックリスト）
- 話のテーマ（章や節）が切り替わるタイミングで
<hr>を使っているか - 単なるデザイン目的（区切り線を入れたいだけ）の
<hr>になっていないか - 住所や詩など、文脈上どうしても必要な場所以外で
<br>を使っていないか - 余白を広くしたいからという理由で
<br>を連続で並べていないか
コメント