hr - 段落レベルのテーマの区切り

hr要素は、段落レベルのテーマの区切りを定義します。
例えば、ストーリーの中でのシーンの区切りや、リファレンス本のセクションの中での他のトピックへの区切りなどです。

hr要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
hr

hr要素のHTML4からHTML5への変更点

基本的には変更ありませんが、HTML4.01で定義されていたalign属性など非推奨とされていた属性が廃止されました。

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。

「hr要素の用途を間違っている例」のサンプル

HTMLコード

<section>
 <h1>hr要素の用途を間違っている例</h1>
 <p>hr要素はコンテンツの区切りを定義します。</p>
 <hr>
 <p>これらのコンテンツにはhr要素が定義されていますが、あまり意味がありません。</p>
 <ul>
  <li>リスト要素1</li>
  <li>リスト要素2</li>
 </ul>
 <hr>
 <p>なぜなら、section要素やh1要素自体に区切りの意味を含んでいるためです。</p>
</section>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「hr要素の用途を間違っている例」のサンプルプレビューを確認

「文章中に話題の区切りがある場合にhr要素を利用すると適切です。」のサンプル

HTMLコード

<p>こちらは冒頭の段落です。</p>
<hr>
<p>こちらでは場面が変わった内容のの段落です。</p>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「文章中に話題の区切りがある場合にhr要素を利用すると適切です。」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100624/grouping-content.html#the-hr-element)