<hr>: 主題区切り（水平線）要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

<hr> は HTML の要素で、段落レベルの要素間において、テーマの意味的な区切りを表します。例えば、話の場面の切り替えや、節内での話題の転換などです。

試してみましょう

<p>§1: ファイトクラブの第一のルール：ファイトクラブについて話してはならない。</p>

<hr />

<p>§2: ファイトクラブの第二のルール：カップケーキを必ず持参すること。</p>

hr {
  border: none;
  border-top: 3px double #333333;
  color: #333333;
  overflow: visible;
  text-align: center;
  height: 5px;
}

hr::after {
  background: white;
  content: "§";
  padding: 0 4px;
  position: relative;
  top: -13px;
}

以前はこれは水平の区切り線として定義されていました。現在でもブラウザーでは水平線として表示されますが、この要素は表示論的な用語ではなく意味論的な用語で定義されましたので、水平線を引きたいのであれば、適切な CSS を使用して行うようにしてください。

属性

この要素にはグローバル属性があります。

align

区切り線の配置を指定します。初期値は left です。

color

区切り線の色を色名、または 16 進数で指定します。

noshade

網掛けをしないように指定します。

size

区切り線の高さをピクセル数で指定します。

width

区切り線の幅をピクセル数、あるいはパーセント値で指定します。

例

HTML

html
<p>
  これは第一段落のテキストです。これは第一段落のテキストです。
  これは第一段落のテキストです。これは第一段落のテキストです。
</p>

<hr />

<p>
  これは第二段落のテキストです。これは第二段落のテキストです。
  これは第二段落のテキストです。これは第二段落のテキストです。
</p>