HTML <hr>

HTMLの<HR>タグはHorizontal Ruleという意味で、水平方向の罫線を表示できます。この記事では、hrタグの使い方をご紹介します。

HTMLの場合、タグ名や属性名は大文字と小文字を区別しない。終了タグ（閉じタグ）は省略できる。下記のうち、いずれの書き方でもよい。

<HR></HR>

<hr></hr>

<HR>

<hr>

<HR />

<hr />

XHTMLの場合、タグ名や属性名を小文字で記述する。終了タグ（閉じタグ）は省略できるが、XMLの規則に従う必要がある。下記のうち、いずれの書き方でもよい。

<hr></hr>

<hr />

属性

hr要素にはグローバル属性を指定できる。具体的には、次に示す属性である。

accesskey

アクセスキーを指定する。

align

配置を指定します。HTML 4.01 Strictで廃止されました。

align属性

属性値	意味
left	左寄せ
center	中央寄せ
right	右寄せ

autocapitalize

ユーザーが入力や編集をしたとき、自動的にキャピタライズを行うかどうかを指定する。

autocapitalize属性

値	説明
off	自動的な大文字化を行わない。
on	各文における最初の文字を自動的に大文字にする。
none	自動的な大文字化を行わない。
sentences	各文における最初の文字を自動的に大文字にする。
words	各単語における最初の文字を自動的に大文字にする。
characters	すべての文字を自動的に大文字にする。

class

CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。

contenteditable

ユーザによる編集が行えるかどうかを指定する。

contenteditable属性

値	説明
true	ユーザによる編集が行える。
false	ユーザによる編集が行えない。

data-*

カスタムデータ属性を指定する。

dir

テキストの方向を指定する。

dir属性

値	説明
ltr	左から右へ記述する。（日本語や英語など）
rtol	右から左へ記述する。（アラビア語など）
auto	ユーザーエージェントに決定される。

draggable

要素がドラッグできるかどうかを指定する。

draggable属性

値	説明
true	要素をドラッグできる。
false	要素をドラッグできない。

id

一意な識別子を指定する。

lang

要素の言語を指定する。

style

CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

使用例

HTMLタグ <hr> の使用例と表示サンプルを次に示します。

<hr>

色

hrタグの属性で色を指定する方法はない。属性の代わりにCSSで色を指定する。

<hr style="border:none;border-top:1px solid red;">

まず border:none; で罫線を消してから、改めて罫線を設定する。

点線

hrタグの属性で点線にする方法はない。属性の代わりにCSSで点線を指定する。

<hr style="border:none;border-top:1px dotted black;">

まず border:none; で罫線を消してから、改めて罫線を設定する。

カテゴリ

hr要素はフローコンテンツのカテゴリに属する。

コンテンツモデル

hr要素に内容は無い。開始タグと終了タグの間には何も含めることができない。

JavaScript

JavaScriptからはHTMLHRElementインタフェースを通じてhr要素へアクセスできる。

HTMLタグ

参考文献

Web Hypertext Application Technology Working Group (2021) "Grouping content" HTML Living Standard