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

Baseline Widely available

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

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

試してみましょう

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

属性

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

align

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

color

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

noshade

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

size

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

width

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

例

HTML

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

<hr />

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

結果

技術的概要

コンテンツカテゴリー フローコンテンツ
許可されている内容 なし。これは空要素です。
タグの省略 開始タグは必須。終了タグを記述してはならない。
許可されている親要素 フローコンテンツを受け入れるすべての要素
暗黙の ARIA ロール separator
許可されている ARIA ロール presentation または none
DOM インターフェイス HTMLHRElement

仕様書

Specification
HTML Standard
# the-hr-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報