HTML

HyperText Markup Language hr element.

hr 要素

　hr要素は、意味的な段落の区切り、セクション内における話題の区切りを表す際に使用します。例えば、ブログ記事の中で本題とはそれて余談に入る直前や、閑話休題となる（本題に戻る）直前、物語におけるシーンの変わり目などの箇所に適しています。

　基本的には、セクションの中で使うものです。セクション同士の区切りとなる </section> と <section> の間については、すでにそれ自体でテーマの区切りを表しているので、hr要素を挿入する必要はありません。

　HTML4では罫線を表すプレゼンテーショナルな要素でした。そのため、単純に、罫線を引きたい場所に、この要素が使われてきました。例えば、章や節といったセクションの区切りとして使われたり、ただ単にスタイル目的で使われることもありました。

　また、HTML4では、align, noshade, size, width といった属性が規定されていました。HTML5では、プレゼンテーショナルな概念は排除されています。そのため、このような属性は廃止されました。また、セクションを区切るというセマンティクスも持ちませんので、注意してください。そのような用途であればスタイル・シートで対処するようにしましょう。

hr 要素の概要

カテゴリー

フロー・コンテンツ

コンテンツ･モデル

空

利用可能な場所

フロー・コンテンツが期待される場所。

開始タグ

必須

終了タグ

禁止。ただし、<hr /> のように終了タグを表すスラッシュを開始タグに入れる表記は可能。

要素固有の属性

なし。

標準的なスタイル

hr {
	display: block;
	color: gray;
	border-style: inset;
	border-width: 1px;
}

<section>
	<h2>英語が話せなかった私とペラペラの彼</h2>
	<p>私は全く英語が話せなかった。もちろん、まともに聞く事も出来なかった。...</p>
	 :
	 :
	 :
	<hr />
	<p>彼は英国の大学に通っていた。そのため、彼は英語がぺらぺらだ。...</p>
	 :
	 :
	 :
</section>

<section>
	<h2>英会話学校に行く事に決めた私</h2>
	<p>...</p>
	 :
	 :
	 :
</section>

hr {
	text-align: center;
	border-width: 0px;
	width: 50px;
	font-size: 10px;
	color: #888888;
}

hr:before {
	content: '★　★　★';
}

　このように、hr要素を、1つのセクションの中で、話題が変わる箇所に使います。セクションは section要素などのセクショニング・コンテンツ属性でマークアップし、それぞれのセクションの間に hr要素を入れてはいけません。

　hr要素は、ブラウザでデフォルト・スタイルとして罫線を表すようになっていますが、段落の区切りとしてはやや重い感じがします。そのため、段落の区切りとしてふさわしいスタイルを CSSでセットするのが良いでしょう。ここのサンプルでは、星マークを 3つ並べています。