基礎

HTML

ホライゾンタル・ルール

hr要素

最終更新日：2023-09-18
公開日：2016-01-21

段落（セクション）の区切りを表します。同じような役割を持つsection要素もありますが、hr要素はもう少し細かい単位で区切りたい場合、またはグルーピングまではしたくない場合などに使用します。

HTML サンプルコード

<h1>サンプルコード</h1>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
<hr>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
<hr>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>

カテゴリー
フローコンテンツ
コンテンツモデル
なし
使用ケース
フローコンテンツが期待される場所

属性

グローバル属性: グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

使用例

話題を変えるタイミングなどで使用する例です。

HTML コード例

<article>
  <h1>アラスカからコーヒー豆が届きました。</h1>
  <p><b class="lead">極寒の地、アラスカ。オーロラでも有名な、自然豊かな土地です。<br>そんな場所で育まれた、美味しいコーヒーをご紹介します。</b></p>
  <figure>
    <img src="../alaska_coffee.jpg" alt="alaska_coffee">
  </figure>
  <hr>
  <h2>豆のご紹介</h2>
  <p>まずは特徴をご紹介していきます。<br>苦味はそこまで強くありませんが、少し酸味はあります。</p>
  <p>特徴はその香りで、なんとカカオフレーバーに仕立てられており...</p>
</article>

ブラウザでの表示例

ca-pub-6292870682629488