<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
# the-hr-element

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
hr
align
DeprecatedNon-standard
color
DeprecatedNon-standard
<hr> in <select>
noshade
DeprecatedNon-standard
size
DeprecatedNon-standard
width
DeprecatedNon-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.

関連情報