<hr> 区切り線(罫線)を引く

取り扱い HTML初期から実装済みの要素
カテゴリ フロー・コンテント
親にできる要素 フロー・コンテンツが期待される場所
子にできる要素 なし
対応ブラウザ <hr>の対応状況を確認する

<hr>タグは、任意の所で区切り線(罫線)を引くために使用します。この要素は画面の横幅一杯に広がり、自動的に改行が発生します。これ自体で一つ完結した要素になるため、終了タグを記述する必要はありません。また、ブロックレベル要素として存在するため、インライン要素の子要素として扱う事は不適切です。

初期値では、影の付いた立体的な線で表示されます。属性を与える事で、ある程度自由な見た目に設定出来ますが、現在はスタイルシートによる装飾を推奨します。

HTML4までは、水平線が描画されるという見た目だけの定義でしたが、HTML5で話題やテーマの区切りを示す要素としての位置づけに変更されています。同じページの中で複数の話題を扱う場合には、<section要素>を活用するなどして、より正しい文章構造を意識しましょう。

<hr>タグに指定できる属性

color="#値"
線の色を指定出来ます。
width="値"
pxや%で線の幅を指定する事が出来ます。
size="値"
pxや%で線の太さを指定する事が出来ます。
style="プロパティ:値;"
スタイルを指定します。
id="", class=""
idやclass付けが出来ます。

<hr>の使用サンプル

HTML
<p>
文章や画像を含む要素です。段落の間に仕切り線を引きます。</p>
<hr>

<p>
属性を追加して装飾した例1</p>
<hr color="#ff0000" width="40%" size="3">
<p>
属性を追加して装飾した例2</p>
<hr color="#00ff00" width="60%" size="6">
<p>
属性を追加して装飾した例3</p>
<hr color="#0000ff" width="80%" size="9">
表示確認
文章や画像を含む要素です。段落の間に仕切り線を引きます。

属性を追加して装飾した例1


属性を追加して装飾した例2


属性を追加して装飾した例3


※現在、HTML要素を装飾する場合はCSSを使用することが推奨されています。

<hr>に関連するHTMLタグ

コンテンツグループ要素
<blockquote> 引用文であることを表す(長文用)
<dd> 定義した用語の説明を記述する
<details> ユーザーのリクエストに応じて追加情報を提供するディスクロージャー・ウィジェットを設置する
<div> ブロックレベル要素としての範囲を指定
<dl> 定義リストであることを表す
<dt> 定義する用語を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<figure> 写真や図表などの自己完結した要素を表す
<hr> 区切り線(罫線)を引く
<li> リストの項目を表示する
<menu> リストをメニューとして扱う
<ol> 順序のあるリストを定義する
<p> 段落を指定する
<pre> ソースを整形済みテキストとして表示する
<summary> 詳細内容(<details>)の要約や概要を設定する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<ul> 順序のないリストを定義する