hrタグで横罫線を引いてみよう！【HTML・解説・初心者向け】| ノブレコ
nobreco
<hr>横罫線（区切り線）について知ろう！
★<hr>要素の特徴：
・タグのカテゴリ ―― 空要素。
・コンテンツモデル ―― フローコンテンツ・グルーピングコンテンツ。
・タグの省略 ―― 開始タグ必須、終了タグは記述しない。
・使用可能な親要素 ―― フローコンテンツが使える親要素すべて
・グローバル属性を持つ 。
・ARIAロール ―― 標準でseparatorロールを持つ。
<hr>横罫線（区切り線）の説明
<hr>とは「horizontal rule（ホリゾンタルルール）」の略で、横罫線を意味するタグです。
一般的には段落ちと段落ちの間で使用します。
このタグには意味的な「区切り」という役割があり、見た目(（スタイル）だけで横罫線を引くものではありません。
例えば使用目的として、この意味的な区切りを使う場合には、文章の切り替わりや、場面が一転して変化するといった状況で使うことが考えられます。
<hr>の使用上の注意点：
① <hr>タグは、線を引くだけの目的で使用はしない。(横罫線が必要な場合は適切なCSSで指定する)
② 見出しやセクションの代替えとして使用しない。(見出しとセクション以外でどうしても区切りが必要な場面は除く)
非推奨の属性：
・align属性 ―― 要素の配置方向を指定する属性
・noshade属性 ―― hr要素の横罫線を溝のない単色で示す属性
・size属性 ―― 要素の幅を高さを指定する属性
・width属性 ―― 要素の横幅を指定する属性
※これらの属性は、HTML4.01以降では非推奨（XHTML1.1では廃止になっているのものも含まれる）ので<hr>にスタイルを指定したい場合は適切なCSSを活用しましょう。
アクセシビリティでの注意点：
標準でのARIAロールにseparatorロールを持っており、スクリーンリーダーでの読み上げの際に「区切り」を読み上げる場合がある、またジャンプで次の区切りに飛ぶといった機能もあるので、使用目的をはっきりさせて使いたい。
<hr>要素の記述例：
段落ちと段落ちとの間に<hr>を挿入する。
実行結果：
下の表示のように文章と文章の間に「意味的な区切り」である横罫線が入った。
まとめ
この記事では、<hr>タグについて解説しました。
<hr>タグは、意味的な区切りをしたい場合に使います。
スタイルで横線を引きたい場合などはCSSを採用するようにしましょう。
見出しやセクションの代わりに<hr>を使用することも避けたいです、適切な要素を選んで使用しましょう。
<hr>をやみくもに多用するのは、読み上げソフトなどで利便性を損なう恐れもあるので無駄に使用するのは避けましょう。
最後まで読んでいただき、ありがとうございました☆*: .｡. o(≧▽≦)o .｡.:*☆
