最終更新日 2021年4月7日

hr要素

段落と段落の間で文章の主題が変わる場合などに、意味的な区切りを入れます。一般的には、区切り線で表されます。

以前のHTMLのバージョンでは、hr要素は主に、水平線によって段落の区切りを視覚的に表すために使われるものでしたが、HTML5では、段落レベルのコンテンツの、内容による区切り箇所を表します。ドキュメントのアウトラインには影響を及ぼしません。

hr要素自体はコンテンツを持たない空要素で、終了タグはありません。Flowコンテンツの記述箇所で使用できます。

HTML5での変更点

・hr要素のalign、color、noshade、size、widthの各属性は廃止されました。代わりにCSSを使います。

カテゴリ	タグの省略	親要素	子要素
Flowコンテンツ	空要素	Flowコンテンツを子にできる要素	なし

属性	値	説明
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>マクドエイド</title>
  </head>
  <body>
    <p>バーガーショップ「マクドエイド」にようこそ！</p>
    <hr>
    <p>ハンバーガー、ポテト、シェイクなど豊富なメニューを揃えております。</p>
  </body>
</html>

参考文献：W3C HTML5「4.5.2 The hr element」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。