<hr>: HR 要素
最終更新：2026-10-13
<hr>HR 要素
<hr>（水平線）要素はテーマの区切りを表し、既定では水平線として表示されます。HTML5 では話題の転換を示し、段落を視覚的に分けるためによく使われます。空要素です。
| カテゴリ | テキスト内容 |
|---|---|
| コンテンツモデル | なし（空要素） |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 自己完結 — 閉じタグ不要 |
| ステータス | 標準 |
📝 構文
段落1<hr>段落2▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <hr> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
❓ よくある質問
Qhr はただ線を引くだけの要素ですか？
Aそれだけではありません。
<hr> の意味は「テーマの転換」（topic break）です。物語の場面転換や話題の区切りを表します。視覚的にはデフォルトで水平線として描画されますが、意味のない純粋な装飾の区切り線は CSS の border で実装すべきです。Qhr は空要素ですか？スタイルは設定できますか？
A空要素で、終了タグがなく内容を持ちません。スタイルは完全にカスタマイズ可能です。
hr { border: none; border-top: 1px solid #ddd; } は定番のリセット方法で、幅やグラデーションなども制御できます。Qhr と section は併用する必要がありますか？
A重ねて表現する必要はありません。
<section>（見出しのあるテーマのグループ）を使ったなら、<hr> を足す必要はありません。構造自体が区切りになるからです。hr は見出しのない緩い話題転換に向くもので、両者は粒度の違う道具です。🏷️ 関連タグ
💡 関連ケース
📚 関連チュートリアル
