hr 要素段落レベルでの区切りを表す
hr 要素は段落レベルでの区切りを表します。例えば、物語の中でシーンが変わる場合や、文章内で別の話題に切り替わる際に使用されます。
話題の変化と同時に文章のセクション自体が変わる場合は、見出しレベルの変更や、セクショニング・コンテンツによって表すべきですが、同一のセクション内で話題を変えたい場合には hr 要素が使用できます。
menu 要素内での hr 要素
menu 要素の type 属性は HTML Standard 仕様において削除されました。
menu 要素に type="context" が指定されている場合、menu 要素の子孫要素となる hr 要素は、各メニュー項目を区切るセパレータとして機能します。項目の多いメニューを作成する際などに利用することができます。
hr 要素のサンプルソース
<article> <h1>今日の出来事</h1> <p> 今日は9時に起きなければならなかったのに目が覚めたら10時だった。終わった。 </p> <hr /> <p> 昼になってごはんを食べていると宅配便が届いた。 </p> <p> …省略… </p> <hr /> <p> 夕飯はピザを注文したが、30分待っても来なかった。 </p> </article>
<!-- このようにセクション自体が変わっている部分に hr 要素を入れる必要はありません --> <article> <h1>水曜日の出来事</h1> <p> 今日は9時に起きなければならなかったのに目が覚めたら10時だった。終わった。 </p> </article> <hr /> <article> <h1>火曜日の出来事</h1> <p> 夕飯はピザを注文したが、30分待っても来なかった。 </p> </article>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |