hr要素
Updated / Published
hr
要素(horizontal rule)は水平方向に罫線(区切り線)を表示させます。同一文書内で複数の話題を扱う場合に途中で話題を変える時の目印となる区切り線として用いられます。
hr
要素は終了タグはなく内容をもたない空要素ですが、ブロックレベル要素に分類され、視覚環境の UA では表示域の左右いっぱいまでの範囲を占め前後に改行を置いた表示になります。このため hr
要素に続いてテキストや他の要素を続けたり、hr
要素を2つ続けて横に並べて表示させることはできません。また、非視覚環境においては再現(表現)しにくいことから、積極的に title
属性を指定して補足情報をつけることが推奨されています。
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 要素型
- ブロックレベル要素
- 開始タグ
- 必須
- 終了タグ
- -
- 非推奨
- -
- 内容モデル
- -
align属性
- バージョン
- HTML4.01(T,F)
- XHTML1.0(T,F)
- 指定要素
- hr
- 必須
- -
- 非推奨
- 非推奨
- HTML4.01 strict 廃止
- XHTML1.0 strict 廃止
- XHTML1.1 廃止
- 属性値
- left
- right
- center
width
属性で区切り線の横幅を指定した場合に、区切り線の水平(左右)方向の揃え方を指定します。値には次の3つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。
- left
- 表示域に対して区切り線を左揃えに表示する
- right
- 表示域に対して区切り線を右揃えに表示する
- center
- 表示域に対して区切り線を中央揃えに表示する
align
属性は非推奨のため、CSS の text-align
プロパティで代替することが推奨されています。
color属性
区切り線の色を16進数RGB値、またはカラーネームで指定します。仕様には定義されていない Internet Explorer が独自に採用した機能です。
noshade属性
- バージョン
- HTML4.01(T,F)
- XHTML1.0(T,F)
- 指定要素
- hr
- 必須
- -
- 非推奨
- 非推奨
- HTML4.01 strict 廃止
- XHTML1.0 strict 廃止
- XHTML1.1 廃止
- 属性値
- noshade
- noshade="noshade"(XHTML)
区切り線の表示方法を影なしで表示させる属性です。デフォルトの区切り線は陰影のある立体的な表示になっていますが、これをあえて平面的なラインで表現します。
HTML4.01 では noshade
、XHTML ではnoshade="noshade"
と記述します。また、CSS の background-color
プロパティで背景色が指定されると、noshade
属性が指定された場合と同じように平面的なラインになります(Internet Explorer6/7/8 には実装の問題があり区切り線の色は前景色扱いになるため color
プロパティで指定しなければなりません)。
size属性
- バージョン
- HTML4.01(T,F)
- XHTML1.0(T,F)
- 指定要素
- hr
- 必須
- -
- 非推奨
- 非推奨
- HTML4.01 strict 廃止
- XHTML1.0 strict 廃止
- XHTML1.1 廃止
- 属性値
- 整数(pixels)
区切り線の太さ(高さ)を整数(ピクセル数で解釈)で指定します。CSS の height
プロパティで代替することが推奨されています。
width属性
- バージョン
- HTML4.01(T,F)
- XHTML1.0(T,F)
- 指定要素
- hr
- 必須
- -
- 非推奨
- 非推奨
- HTML4.01 strict 廃止
- XHTML1.0 strict 廃止
- XHTML1.1 廃止
- 属性値
- 整数(pixels)
- パーセンテージ値(%)
区切り線の横幅を整数(ピクセル数で解釈)で指定します。CSS の width
プロパティで代替することが推奨されています。
その他の属性
HTML5のhr要素
HTML5においてhr
要素は、段落内の論理的な区切りを示す要素と具体的な意味が与えられました。用途しては、セクションをわけるほどでもないが、前後の段落で話題をわけていることを示したい場合に使用すると良いでしょう。また、表示を操作するための属性はすべて廃止されています。