hr 要素段落レベルでの区切りを表す

hr 要素は段落レベルでの区切りを表します。例えば、物語の中でシーンが変わる場合や、文章内で別の話題に切り替わる際に使用されます。

話題の変化と同時に文章のセクション自体が変わる場合は、見出しレベルの変更や、セクショニング・コンテンツによって表すべきですが、同一のセクション内で話題を変えたい場合には hr 要素が使用できます。

menu 要素内での hr 要素

menu 要素の子孫要素となる hr 要素は、各メニュー項目を区切るセパレータとして機能します。項目の多いメニューを作成する際などに利用することができます。

サンプルソースを見る

hr 要素の仕様

カテゴリ
コンテンツモデル
この要素を使用できる文脈

フロー・コンテンツが期待される場所

この要素で使用できる属性
DOM インタフェース
interface HTMLHRElement : HTMLElement {};

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>

W3C HTML5 仕様書

4.5.2 The hr element