HTML <hr> 主題区切り（水平線）要素
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
<hr> は HTML の要素で、段落レベルの要素間において、テーマの意味的な区切りを表します。例えば、話の場面の切り替えや、節内での話題の転換などです。
試してみましょう
<p>§1: ファイトクラブの第一のルール：ファイトクラブについて話してはならない。</p>
<hr />
<p>§2: ファイトクラブの第二のルール：カップケーキを必ず持参すること。</p>
hr {
border: none;
border-top: 3px double #333333;
color: #333333;
overflow: visible;
text-align: center;
height: 5px;
}
hr::after {
background: white;
content: "§";
padding: 0 4px;
position: relative;
top: -13px;
}
過去には、<hr>要素は常に水平線として表示されてきました。視覚的なブラウザーでは現在も水平線として表示される場合がありますが、この要素は現在、表現上の観点ではなく、意味づけの観点から定義されています。したがって、水平線を描画したい場合は、CSSを使用して既存の要素に境界線を追加することで実現する必要があります。
border-* プロパティ（例えば、border-style や border-color など）を使用すると、<hr> 要素をカスタマイズする場合でも、別の要素に描画された境界線をカスタマイズする場合でも、線の外観を大幅にカスタマイズすることができます。
属性
この要素にはグローバル属性があります。
例
HTML
html
<p>
これは第一段落のテキストです。これは第一段落のテキストです。
これは第一段落のテキストです。これは第一段落のテキストです。
</p>
<hr />
<p>
これは第二段落のテキストです。これは第二段落のテキストです。
これは第二段落のテキストです。これは第二段落のテキストです。
</p>
結果
技術的概要
| コンテンツカテゴリー | フローコンテンツ |
|---|---|
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 開始タグは必須。終了タグを記述してはならない。 |
| 許可されている親要素 | |
| 暗黙の ARIA ロール | separator |
| 許可されている ARIA ロール |
presentation または none
|
| DOM インターフェイス | HTMLHRElement |
仕様書
| 仕様書 |
|---|
| HTML # the-hr-element |