hr 要素

4.4.2 hr 要素

カテゴリー:
フロー・コンテント
この要素を使うことができるコンテキスト:
フロー・コンテントが期待される場所
コンテントモデル:
コンテント属性:
グローバル属性
text/html におけるタグの省略:
終了タグはありません。
指定可能な ARIA role 属性 の値:
separator (デフォルト - 指定不要) または presentation
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
interface HTMLHRElement : HTMLElement {};

hr 要素は、段落レベルのテーマの変わり目を表します。例えば、物語の中でのシーンの変わり目や、リファレンス本のセクションの中での他のトピックへの変わり目です。

次は、プロジェクトの手引きという架空の話ですが、ここには 2 つのセクションがあります。これらのセクションの中で hr 要素を使って、トピックを分離しています。

<section>
 <h1>通信</h1>
 <p>通信には様々な方法があります。このセクションでは、この
 プロジェクトで使われる重要な方法のいくつかを扱います。</p>
 <hr>
 <p>コミュニケーション・ストーンは対になっているようだが、不可思議な特性を
 持っている:</p>
 <ul>
  <li>単独で使えば、アクティベートすると双方向に思ったことを転送する
  ことができます。</li>
  <li>他のデバイスと組み合わせて使うと、相手の体に意識や知覚を
  転送することができます。</li>
  <li>両方のストーンが他のデバイスと組み合わせて使われた場合は、
  それぞれの体の意識や知覚を入れ替えることができます。</li>
 </ul>
 <hr>
 <p>無線は、メートル領域とそれ以上の電磁スペクトルを
 使います。</p>
 <hr>
 <p>信号炎管は、ナノメートル領域の電磁スペクトルを
 使います。</p>
</section>
<section>
 <h1>食料</h1>
 <p>このプロジェクトのすべての食料が配給されます:</p>
 <dl>
  <dt>じゃがいも</dt>
  <dd>1 日 2 個</dd>
  <dt>スープ</dt>
  <dd>1 日 1 杯</dd>
 </dl>
 <hr>
 <p>ローテーションでシェフが料理をします。</p>
</section>

これらのセクションの間に hr 要素を入れる必要はありません。なぜなら、section 要素と h1 要素そのものが、テーマの変わり目という意味を含んでいるからです。

次の例は、Peter F. Hamilton 著の Pandora's Star から抜粋ですが、2 つの段落があります。はじめの段落の後にシーンの変わり目があり、2 つ目の段落がそれに続きます。このシーンの変わり目は、書籍では 2 つ目と 3 つ目の段落の間に 1 つだけのセンタリングされた星を入れ間隔を空けることで表されていますが、ここでは、hr 要素を使って表されています。

<p>Dudley was ninety-two, in his second life, and fast approaching
time for another rejuvenation. Despite his body having the physical
age of a standard fifty-year-old, the prospect of a long degrading
campaign within academia was one he regarded with dread. For a
supposedly advanced civilization, the Intersolar Commonwealth could be
appallingly backward at times, not to mention cruel.</p>
<p><i>Maybe it won't be that bad</i>, he told himself. The lie was
comforting enough to get him through the rest of the night's
shift.</p>
<hr>
<p>The Carlton AllLander drove Dudley home just after dawn. Like the
astronomer, the vehicle was old and worn, but perfectly capable of
doing its job. It had a cheap diesel engine, common enough on a
semi-frontier world like Gralmond, although its drive array was a
thoroughly modern photoneural processor. With its high suspension and
deep-tread tyres it could plough along the dirt track to the
observatory in all weather and seasons, including the metre-deep snow
of Gralmond's winters.</p>

hr 要素は、ドキュメントのアウトラインに影響を及ぼすことはありません。

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-hr-element