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属性は非推奨のため、CSStext-alignプロパティで代替することが推奨されています。

color属性

バージョン
Internet Explorer の独自機能
指定要素
hr
必須
-
非推奨
-
属性値

区切り線の色を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要素は、段落内の論理的な区切りを示す要素と具体的な意味が与えられました。用途しては、セクションをわけるほどでもないが、前後の段落で話題をわけていることを示したい場合に使用すると良いでしょう。また、表示を操作するための属性はすべて廃止されています。