<hr>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ
利用場所 フロー・コンテンツが置ける場所 / select要素の子要素として
内容 無し（空要素）

hr要素は、段落レベルのテーマの区切りを表します。また、select要素内で使用した場合はoption要素間の区切りを表します。


<hr>

段落レベルの区切り

hr要素を使用することで、セクション内におけるテーマの区切りを表すことができます。

セクションで区切るほどではないが、話題の変わり目は示しておきたいといった場面で使用することができます。例えば、次のような感じで使用します。

<section>

<p>... ということで、今日は忙しい一日でした。</p>

<hr>

<p>ところで、明日からは連休となりますが、皆さんは ...</p>

</section>
  • この要素は段落単位の区切りとして使うものなので、セクション間の区切り線として配置するのは適切ではありません。

option要素間の区切り

hr要素をselect要素内で使用すると、option要素間の区切りを表すことができます。

文字コード：
<select name="code">
<option value="auto">自動判定</option>
<hr>
<option value="utf8">UTF-8</option>
<option value="sjis">Shift-JIS</option>
<option value="euc">EUC-JP</option>
</select>

要素のデフォルトスタイル

一般的なブラウザでは、この要素を配置した位置に水平線が引かれ、その上下に0.5em程度のマージンが入ります。水平線の色や太さは、ブラウザにより若干異なります。

select要素内で使用した場合は次のように表示されます。

  • 2024年1月現在、size属性が指定されたselect要素内では、hr要素の線が表示されないようです。
旧HTMLからの変更点
  • HTML5：要素の定義が変わりました。（水平線 → 段落レベルのテーマの区切り）
  • HTML5：size属性、width属性、align属性、noshade属性が廃止されました。
  • HTML LS：select要素内に配置できるようになりました。

使用例

article要素内で使用した例

<article>

<h2>テーマの区切りについて</h2>

...

<p>という具合に、話題の変わり目はhr要素を使って表すことになります。</p>

<hr>

<p>ところでこの水平線、デザインが少し野暮ったいとは思いませんか？</p>

<p>このまま使って構わないのですが、もっとカッコいい水平線にする方法も ...</p>

</article>
表示例

テーマの区切りについて

...

という具合に、話題の変わり目はhr要素を使って表すことになります。

ところでこの水平線、デザインが少し野暮ったいとは思いませんか？

このまま使って構わないのですが、もっとカッコいい水平線にする方法も ...

select要素内で使用した例

文字コード：
<select>
<option value="auto">自動判定</option>
<hr>
<option value="utf8">UTF-8</option>
<option value="sjis">Shift-JIS</option>
<option value="euc">EUC-JP</option>
</select>
表示例
文字コード：