HTML <HR>タグ

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

HTML4

HTML4ではhrタグを次のように書く。いずれの書き方でもよい。

<HR></HR>
<HR>
<hr></hr>
<hr>

XHTML

XHTMLではhrタグを次のように書く。いずれの書き方でもよい。

<hr></hr>
<hr />

HTML5

HTML5でhrタグは廃止された。

HTML5では、hrタグの代わりにCSSで境界線をつける。

<div style="border-bottom:1px solid black;">
  HTML5でhrタグは廃止されました。
</div>
HTML5で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; で罫線を消してから、改めて罫線を設定する。

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タグ