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要素へアクセスできる。

HTMLHRElementインタフェースのプロパティ
プロパティ 説明
dataset DOMStringMap hr要素のカスタムデータ属性
dir DOMString hr要素のdir属性
innerText DOMString ノードに描画されるテキスト
lang DOMString hr要素のlang属性
style CSSStyleDeclaration hr要素のstyle属性
title DOMString hr要素のtitle属性

HTMLタグ

参考文献

WHATWG (2021) "Grouping content" HTML Living Standard