概要
HTML hr 要素 (horizontal rule element / <hr>
) は、段落間のテーマ(例えば物語の中でのシーンの変化や、話題の転換など)の意味的な区切りを表します。過去のバージョンの HTML では区切り線として定義されており、また現行のブラウザーもこれを踏襲したデフォルト・スタイルを持っています。しかし、視覚的な区切り線としてではなく、あくまで意味的な用途としての使用が推奨されます。
コンテンツカテゴリ | フローコンテンツ |
---|---|
許可された内容 | なし。これは空要素です。 |
タグの省略 | 開始タグは必須。終了タグを記述してはならない。 |
許可された親要素 | フローコンテンツを受け入れるすべての要素 |
DOM インターフェイス | HTMLHRElement |
属性
他の全ての要素と同様に、この要素はグローバル属性をサポートします。
align
非推奨 HTML4.01 廃止 HTML5- 区切り線の配置を指定します。初期値は
left
です。 color
- 区切り線の色をカラーネーム、または 16進数で指定します(例:
red
、#F00
、#FF0000
) noshade
非推奨 HTML4.01 廃止 HTML5- 網掛けをしない様に指定します。
size
非推奨 HTML4.01 廃止 HTML5- 区切り線の高さをピクセル値で指定します。
width
非推奨 HTML4.01 廃止 HTML5- 区切り線の幅をピクセル値、あるいはパーセントで指定します。
例
<p>This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text.</p> <hr> <p>This is second paragraph of text. This is second paragraph of text. This is second paragraph of text. This is second paragraph of text.</p>
このコードは、次の様に出力されます。
This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text.
This is second paragraph of text. This is second paragraph of text. This is second paragraph of text. This is second paragraph of text.
注意
意味的なものではなく、単に視覚的な区切り線を実現したい場合は、 カスケーディング・スタイルシートを使用します。
【訳注: 単純な水平の区切り線であれば border-bottom プロパティを用いて。それ以上の装飾が必要であれば、background-image、background-position、background-repeat 等のプロパティを併用する方法が最も一般的でしょう。疑似要素を用いた手法もあります】
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
WHATWG HTML Living Standard <hr> の定義 |
現行の標準 | hr 要素を定義 |
WHATWG HTML Living Standard | 現行の標準 | hr 要素のデフォルトレンダリング方法を提案 |
HTML5 <hr> の定義 |
勧告 | |
HTML 4.01 Specification <hr> の定義 |
勧告 |
ブラウザ実装状況
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
基本サポート | 1.0 | (有) | (有) | (有) | (有) |
機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基本サポート | (有) | (有) | (有) | (有) | (有) |