<hr>タグは、段落レベルのテーマ区切りを表す際に使用します。
hr要素は、例えばセクション内で別トピックに移行する箇所や、物語の場面転換などで使用します。
hr要素は、文書のアウトラインには影響しません。
あくまでも段落レベルのテーマ区切りであり、hr要素によってセクションは区切られません。
一方で、section要素などのセクション生成要素を配置すると、そこでセクションが区切られます。
そのため、セクションとセクションの間にhr要素を配置する必要はありません。
HTMLの仕様では、hr要素には終了タグ</hr>はありません。
以下のサンプルでは、section要素のなかに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>肉料理・魚料理の二択</dd>
<dt>スープ</dt>
<dd>日替わり</dd>
</dl>
<hr>
<p>調理は、シェフが決められたローテーションで行います。</p>
</section>
フィレンツェはルネサンスの中心地でした。中心部は世界遺産に登録されています。
ローマはイタリアの首都です。宗教建築や遺跡などの見どころがたくさんあります:
全日ランチは自由行動です。個人経営レストランもおすすめです。
ショッピングのおすすめは、イタリア有名ブランド店巡りです。
夕食は全日用意されています:
調理は、シェフが決められたローテーションで行います。
以下のサンプルは、『Pandora’s Star』という小説の抜粋意訳です。
2つの段落があってシーンが変わり、さらに段落が続きます。
印刷本ではシーンが変わる箇所は星マーク1つで表現されているそうですが、ここではhr要素で示しています。
<p>
ダドリーは二度目の人生の92歳で、次の若返りの時期が近づいていた。
彼の身体年齢は標準的な50歳だが、学界内での品位が傷つけられることを恐れた。
高度な文明をほこる太陽系連邦は、恐ろしいほど遅れている部分もある。
</p>
<p>
<i>そんなに悪くないかもしれない</i>、と彼は自分に言い聞かせた。
その嘘は、彼が夜勤の残りを乗り切るのに十分な慰めとなった。
</p>
<hr>
<p>
カールトン・オールランダーは、夜明け直後にダドリーを家まで送ってくれた。
乗り物は古くてすり減っていたが、その仕事を完璧にこなすことができた。
グラルモンドの地ではよくある安価なディーゼル エンジンを搭載しているが、
ドライブ アレイは最新のフォトニューラル プロセッサだ。
高いサスペンションと深いトレッドのタイヤで、
グラルモンドの数メートルの深さの雪のなかでも進むことができる。
</p>
ダドリーは二度目の人生の92歳で、次の若返りの時期が近づいていた。
彼の身体年齢は標準的な50歳だが、学界内での品位が傷つけられることを恐れた。
高度な文明をほこる太陽系連邦は、恐ろしいほど遅れている部分もある。
そんなに悪くないかもしれない、と彼は自分に言い聞かせた。
その嘘は、彼が夜勤の残りを乗り切るのに十分な慰めとなった。
カールトン・オールランダーは、夜明け直後にダドリーを家まで送ってくれた。
乗り物は古くてすり減っていたが、その仕事を完璧にこなすことができた。
グラルモンドの地ではよくある安価なディーゼル エンジンを搭載しているが、
ドライブ アレイは最新のフォトニューラル プロセッサだ。
高いサスペンションと深いトレッドのタイヤで、
グラルモンドの数メートルの深さの雪のなかでも進むことができる。