HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<hr>
水平線（Horizontal Rule）要素。テーマの区切りを示すためのHTML要素です。
info
概要
<hr> 要素は、段落レベルのテーマの区切りを示します。例えば、物語の中での場面転換、または長い記事の中でのセクションの変更などを意味します。
視覚的には水平線としてレンダリングされることが多いですが、その主要な目的は見た目の線ではなく、意味的な区切りを示すことです。閉じタグの不要な空要素です。
play_circle
デモ (静的表示)
HTML (Source)
<p>最初のテーマに関する内容です。</p>
<hr>
<p>ここから新しいテーマに関する内容が始まります。</p>
Preview (Result)
最初のテーマに関する内容です。
ここから新しいテーマに関する内容が始まります。
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| グローバル属性 | 全ての $\text{HTML}$ 要素で共通の属性（$\text{id}$, $\text{class}$, $\text{style}$ など）のみ使用可能です。 $\text{HTML5}$ 以降、$\text{align}$, $\text{color}$, $\text{noshade}$, $\text{size}$, $\text{width}$ などの属性は廃止されています。 |
code
実用例
1. 記事内のテーマの区切りとして
<article>
<h2>第一章: はじまり</h2>
<p>長い旅が始まりました...</p>
<hr> <!-- テーマの区切り -->
<h2>第二章: 試練</h2>
<p>彼の目の前に巨大な壁が...</p>
</article>
2. $\text{CSS}$ で装飾した水平線
<!-- CSSでデザインを細かく制御するのが現代的な方法です -->
<hr style="border: none; height: 3px; background-color: #005AC1; margin: 40px 0;">
3. 視覚的な区切りが必要だが意味的な区切りではない場合
info
視覚的な線としてのみ使用し、意味的な区切りではない場合（例えば、フォーム内の入力項目を単に区切る場合など）は、$\text{CSS}$ の $\text{border}$ プロパティや $\text{div}$ 要素で対応することが推奨されます。$\text{hr}$ は必ず意味的なテーマの区切りとして使用しましょう。
lightbulb
知っておくべき重要事項
warning
非推奨属性について
$\text{HTML5}$ では、$\text{hr}$ 要素の $\text{align}$、$\text{color}$、$\text{noshade}$、$\text{size}$、$\text{width}$ などの属性は廃止されました。これらの属性は使用せず、線のスタイル（色、太さ、幅など）はすべて $\text{CSS}$ で制御する必要があります。
$\text{HTML5}$ では、$\text{hr}$ 要素の $\text{align}$、$\text{color}$、$\text{noshade}$、$\text{size}$、$\text{width}$ などの属性は廃止されました。これらの属性は使用せず、線のスタイル（色、太さ、幅など）はすべて $\text{CSS}$ で制御する必要があります。
accessibility_new
アクセシビリティ
$\text{hr}$ 要素は、スクリーンリーダーに対して「主題の区切り」として伝えられます。したがって、連続して $\text{hr}$ 要素を使用したり、意味のない場所に使用したりすると、利用者を混乱させる可能性があります。必ず主題の大きな変更をマークするために使用しましょう。
$\text{hr}$ 要素は、スクリーンリーダーに対して「主題の区切り」として伝えられます。したがって、連続して $\text{hr}$ 要素を使用したり、意味のない場所に使用したりすると、利用者を混乱させる可能性があります。必ず主題の大きな変更をマークするために使用しましょう。