HTML Living Standard/hr

hr 要素

<hr> 要素は、内容の主題の変更を表します。セクション間の区切りとして使用される水平線を表現する目的で用いられますが、視覚的なスタイリングだけでなく、文書構造上の意味も持つことが重要です。

カテゴリ

フローコンテンツ

使用される文脈

フローコンテンツが期待される場所

コンテンツモデル

空要素（他の内容を持つことはできません）

タグの省略

タグは省略できません。常に <hr> を明示的に記述します。

コンテンツ属性

<hr> 要素はグローバル属性のみをサポートします。

アクセシビリティの考慮事項

<hr> 要素は、スクリーンリーダーでセクションの区切りとして認識されます。
スクリーンリーダーにとってわかりやすくするために、必要に応じて近接する要素に説明を追加することを検討してください。

使用例

基本的な使用例

以下は、<hr> を使用してセクションを区切る例です。

<h1>章タイトル</h1>
<p>このセクションでは...</p>
<hr>
<h2>次のセクションタイトル</h2>
<p>次の内容が続きます...</p>

CSSでスタイリング

<hr> 要素の見た目を変更するには、CSSを使用します。

<hr class="custom-divider">

CSS

.custom-divider {
  border: 0;
  height: 1px;
  background-color: #ccc;
}

アクセシビリティを向上させる例

以下は、視覚的にもスクリーンリーダーにとってもわかりやすい区切りを提供する例です。

<section>
  <h2>現在のセクション</h2>
  <p>この内容の後に、次のセクションが続きます。</p>
  <hr aria-label="セクションの区切り">
</section>
<section>
  <h2>次のセクション</h2>
  <p>新しい内容がここに含まれます。</p>
</section>

注意事項

視覚的な装飾のみを目的として <hr> を使用するのは避けてください。セマンティックな意味を持たない場合はCSSで線を描画する方法を検討してください。
コンテンツの区切りを適切に表現するために、<hr> 要素を文書の論理構造と一致させるよう注意してください。