<hr>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ |
| 利用場所 | フロー・コンテンツが置ける場所 |
| 内容 | 無し（空要素） |
hr要素は、段落レベルのテーマの区切りを表します。
- デフォルトスタイル（水平線、上下マージン）
<hr>
hr要素を使用することで、セクション内におけるテーマの区切りを表すことができます。
セクションで区切るほどではないが、話題の変わり目は示しておきたいといった場面で使用することができます。例えば、次のような感じで使用します。
<section>
<p>... ということで、今日は忙しい一日でした。</p>
<hr>
<p>ところで、明日からは連休となりますが、皆さんは ...</p>
</section>
- この要素は段落単位の区切りとして使うものなので、セクション間の区切り線として配置するのは適切ではありません。
要素のデフォルトスタイル
一般的なブラウザでは、この要素を配置した位置に水平線が引かれ、その上下に0.5em程度のマージンが入ります。水平線の色や太さは、ブラウザにより若干異なります。
- 旧HTMLからの変更点
-
- HTML5：要素の定義が変わりました。（水平線 → 段落レベルのテーマの区切り）
- HTML5：size属性、width属性、align属性、noshade属性が廃止されました。
使用例
<article>
<h2>テーマの区切りについて</h2>
...
<p>という具合に、話題の変わり目はhr要素を使って表すことになります。</p>
<hr>
<p>ところでこの水平線、デザインが少し野暮ったいとは思いませんか？</p>
<p>このまま使って構わないのですが、もっとカッコいい水平線にする方法も ...</p>
</article>
- 表示例
-
テーマの区切りについて
...という具合に、話題の変わり目はhr要素を使って表すことになります。
ところでこの水平線、デザインが少し野暮ったいとは思いませんか？
このまま使って構わないのですが、もっとカッコいい水平線にする方法も ...