目次に戻る

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

概要

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

  hr {
    display: block;
    unicode-bidi: isolate;
    color: gray;
    border-style: inset;
    border-width: 1px;
    margin-block-start: 0.5em;
    margin-inline-end: auto;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    overflow: hidden;
  }
  
意味・用法

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

私見・補足

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

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

表示確認

ソース

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

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

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

……。

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


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

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

……。