HTML Tag Reference

hr 要素

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

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

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

select 要素内での hr 要素

select 要素内で hr 要素が使用された場合は、区切り文字を表します。例えば選択肢が多いセレクトメニューにおいて、hr 要素で区切ることで視認性を上げることができるかもしれません。

hr 要素の仕様

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

フロー・コンテンツが期待される場所
select 要素の子として

この要素で使用できる属性

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>
<!-- select 要素内で hr 要素を区切りに使用した例 -->
<select name="pref">
  <option value="">都道府県を選択してください</option>
  <hr>
  <option value="北海道">北海道</option>
  <hr>
  <option value="青森県">青森県</option>
  <option value="岩手県">岩手県</option>
  <option value="宮城県">宮城県</option>
  <option value="秋田県">秋田県</option>
  <option value="山形県">山形県</option>
  <option value="福島県">福島県</option>
  <hr>
  <option value="群馬県">群馬県</option>
  <option value="栃木県">栃木県</option>
  <option value="茨城県">茨城県</option>
  <option value="埼玉県">埼玉県</option>
  <option value="千葉県">千葉県</option>
  <option value="東京都" selected>東京都</option>
  <option value="神奈川県">神奈川県</option>
  <hr>
  <option value="山梨県">山梨県</option>
  …省略…
</select>

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。