目次に戻る

hr要素：HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
属性
HTML構文におけるタグの省略
  • Void elementなので、終了タグはなし。ただし、開始タグの末尾をスラッシュで閉じてもよい（/>）。
WAI-ARIA
  • デフォルトroleは、separator。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、presentation、noneを指定可。
視覚系ブラウザのデフォルトとして期待されるCSS

  hr {
    display: block;
    unicode-bidi: isolate;
    color: gray;
    border-style: inset;
    border-width: 1px;
    margin-block: 0.5em;
    margin-inline: auto;
    overflow: hidden;
  }
視覚系ブラウザにおいて期待されるレンダリング
  • select要素の子として一つ以上の連続したhr要素がある場合は、単一の区切りとしてレンダリングされてもよい。
意味・用法

段落レベルのテーマの変わり目を表す。

select要素の内部においては、選択肢のセット間の区切りを表す。

私見・補足

当該要素は、セクション間の区切りに用いてはならない。セクション内で、新たにセクションが生成されるほどではないテーマの変わり目に使う。

一般的な視覚系ブラウザでのレンダリングは水平線なので、都合が悪ければスタイルシートで調整する。

表示確認

ソース

  <p>これは先週に起こった出来事であり、次のような経過をたどった。</p>
  <p>週明け月曜日のことであった。</p>
  <p>……。</p>
  <p>というわけで、この問題はいったんはケリがついたわけである。</p>
  <hr />
  <p>ところがどっこい。早くもその翌日に、これに関連して別の問題が起きたのである。</p>
  <p>それは火曜日の朝のことであった。</p>
  <p>……。</p>
表示結果

これは先週に起こった出来事であり、次のような経過をたどった。

週明け月曜日のことであった。

……。

というわけで、この問題はいったんはケリがついたわけである。

ところがどっこい。早くもその翌日に、これに関連して別の問題が起きたのである。

それは火曜日の朝のことであった。

……。

ソース２

  <label>select要素→
  <select>
    <option selected="selected">optionその１</option>
    <option>optionその２</option>
    <hr />
    <option>optionその３</option>
    <option>optionその４</option>
  </select>
  </label>
表示結果２