トップページ  > HTML Living Standard  > <hr>

★HTML Living Standard リファレンス

<hr> …… 段落レベルのテーマ区切りを表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<hr>タグは、段落レベルのテーマ区切りを表す際に使用します。

hr要素は、例えばセクション内で別トピックに移行する箇所や、物語の場面転換などで使用します。

hr要素は、文書のアウトラインには影響しません。 あくまでも段落レベルのテーマ区切りであり、hr要素によってセクションは区切られません。

一方で、section要素などのセクション生成要素を配置すると、そこでセクションが区切られます。 そのため、セクションとセクションの間にhr要素を配置する必要はありません。

hr要素の終了タグについて

HTMLの仕様では、hr要素には終了タグ</hr>はありません。

■使用例

以下のサンプルでは、section要素のなかにhr要素を配置してセクション内のトピックを区切っています。

HTMLソース

<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要素で示しています。

HTMLソース

<p>
ダドリーは二度目の人生の92歳で、次の若返りの時期が近づいていた。
彼の身体年齢は標準的な50歳だが、学界内での品位が傷つけられることを恐れた。
高度な文明をほこる太陽系連邦は、恐ろしいほど遅れている部分もある。
</p>
<p>
<i>そんなに悪くないかもしれない</i>、と彼は自分に言い聞かせた。
その嘘は、彼が夜勤の残りを乗り切るのに十分な慰めとなった。
</p>
<hr>
<p>
カールトン・オールランダーは、夜明け直後にダドリーを家まで送ってくれた。
乗り物は古くてすり減っていたが、その仕事を完璧にこなすことができた。
グラルモンドの地ではよくある安価なディーゼル エンジンを搭載しているが、
ドライブ アレイは最新のフォトニューラル プロセッサだ。
高いサスペンションと深いトレッドのタイヤで、
グラルモンドの数メートルの深さの雪のなかでも進むことができる。
</p>
↓↓↓

ブラウザ上の表示

ダドリーは二度目の人生の92歳で、次の若返りの時期が近づいていた。 彼の身体年齢は標準的な50歳だが、学界内での品位が傷つけられることを恐れた。 高度な文明をほこる太陽系連邦は、恐ろしいほど遅れている部分もある。

そんなに悪くないかもしれない、と彼は自分に言い聞かせた。 その嘘は、彼が夜勤の残りを乗り切るのに十分な慰めとなった。


カールトン・オールランダーは、夜明け直後にダドリーを家まで送ってくれた。 乗り物は古くてすり減っていたが、その仕事を完璧にこなすことができた。 グラルモンドの地ではよくある安価なディーゼル エンジンを搭載しているが、 ドライブ アレイは最新のフォトニューラル プロセッサだ。 高いサスペンションと深いトレッドのタイヤで、 グラルモンドの数メートルの深さの雪のなかでも進むことができる。

■関連項目

  • <hr> …… 段落レベルのテーマ区切りを表す
  • <p> …… 段落を表す
  • <div> …… 特別な意味を付加せず子要素をまとめる
  • <article> …… 自己完結する内容であることを表す
  • <section> …… 一般的なセクションを表す
  • <nav> …… ナビゲーションリンクのセクションを表す
  • <aside> …… メインコンテンツとは別のコンテンツであることを表す
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ