<hr>区切りを表す

<hr>タグは、段落単位でのテーマの区切り、内容の変わり目である事を表す要素です。 例えば、物語でのシーンの変わり目やセクション内でのトピックが変わるような部分での、区切りとして使用します。

また一般的なブラウザでは、hr要素は横罫線として表示されますが、装飾目的でhr要素を使うのは誤りです。 hr要素はあくまでも段落の区切り、変わり目を表すために使用します。 hr要素自体を装飾したい場合はCSSを利用します。

なお</section><section>のようなセクション間には<hr>を入れる必要はありません。 これは<section>が暗黙的な区切りの意味を含んでいるからです。

またhr要素はHTML文書のアウトラインには影響を及ぼしません。

HTML5での変更点

HTML4.01でのhr要素は、単なる水平線(Horizontal Rule)を引くという装飾目的の側面がありましたが、HTML5では意味が変わり、段落レベルのテーマの区切りを表す役割になりました。

またHTML4.01の時に用意されていたalign属性・noshade属性・size属性・width属性などは、HTML5では廃止されています。

書式

  • <hr 属性="値"> ……… テーマの区切りを表す

使用した時の例

<p>昨日の天気は大雪でした。本当に寒くて眠れませんでした。</p>
<hr>
<p>今日は信じられないくらい晴れてます!</p>

ブラウザ上の表示例

昨日の天気は大雪でした。本当に寒くて眠れませんでした。


今日は信じられないくらい晴れてます!

対応ブラウザなどのデータ

形式 <hr> カテゴリ フローコンテンツ
親要素 子要素にフローコンテンツをもてるもの 子要素 なし
開始タグ 必須 終了タグ なし
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~