hr 要素

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

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

select 要素内での hr 要素

select 要素内で 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>

<!-- 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>