HTMLのhrタグの使い方まとめ！

html

HTMLのhrタグについて書いています。

hr(horizontal rule)タグは、コンテンツ内の主題の区切りや、視覚的な区切り線を作成するために使用される、非常にシンプルな要素です。
hrタグは、段落、セクション、またはその他のコンテンツのグループを分離するのに役立ち、Webページの視覚的な構造を整理するのに役立ちます。

hrタグの基本的な使い方

hrタグは空要素であり、終了タグは必要ありません。（<hr> または <hr /> の形式で記述できますが、HTML5 では <hr> が推奨されています）
コンテンツの区切りたい箇所に <hr> タグを挿入するだけで、水平線が表示されます。

<h1>セクション 1</h1>
<p>これはセクション 1 の内容です。</p>

<hr>

<h2>セクション 2</h2>
<p>これはセクション 2 の内容です。</p>

上記のHTMLは、ブラウザで以下のように表示されます。（chromeのデフォルトのスタイル）
セクション1とセクション2の間に水平線が表示されます。

ブラウザで確認すると、下記のように表示できました。
HTMLのhrタグの表示確認

hrタグの意味合い

hrタグは、主題の区切りを表します。
これはコンテンツの流れの中で、話題が変わったり、視覚的に分割する必要がある箇所を示すために使用されます。
以前は単なる装飾的な水平線として扱われることもありましたが、HTML5ではセマンティックな意味を持つ要素として定義されています。

hrタグの属性

hrタグは、グローバル属性をサポートします。

  • class属性: CSSのクラスを指定します。
  • id属性: 要素の一意なIDを指定します。
  • style属性: インラインCSSを指定します。
  • title属性: 要素に関する補足情報を指定します。

HTML4では、align, noshade, size, width などの表示に関する属性も存在しましたが、HTML5ではこれらの属性は非推奨となり、CSSでのスタイル指定が推奨されています。

非推奨属性の例（HTML4）

<hr align="left" width="50%" size="5" noshade>

代わりに、CSS を使用して水平線のスタイルを制御します。

<hr style="width: 50%; height: 5px; background-color: #ccc; border: none; text-align: left; margin-left: 0;">

hrタグにスタイルを適用する

hrタグの見た目は、CSSを使用して柔軟にカスタマイズできます。
色、太さ、スタイル、幅、配置などを自由に変更できます。

hr {
  border: 1px solid #ddd; /* 細いグレーの線 */
  margin: 20px 0; /* 上下マージン */
}

.fancy-hr {
  border: none;
  height: 5px;
  background-color: #f0f0f0;
  background-image: linear-gradient(to right, #ccc, #f0f0f0, #ccc);
}

<h1>通常のhrタグ</h1>
<hr>
<h2>装飾されたhrタグ</h2>
<hr class="fancy-hr">

上記の例では、CSS を使用して水平線のスタイルを変更しています。.fancy-hr クラスを適用した <hr> タグは、グラデーションのある少し装飾的な線として表示されます。
HTMLのhrタグにスタイルを適用する

hrタグを使用する際の注意点

  • レイアウト目的での多用は避ける: 視覚的なスペースや区切りを目的として、hrタグを多用すると、HTML構造が意味的に不適切になる可能性があります。レイアウト調整はCSSのmargin, padding, borderなどのプロパティで行うべきです。

  • アクセシビリティ: スクリーンリーダーはhrタグを「水平線」として読み上げる場合があります。装飾目的で使用する場合は、aria-hidden="true"属性を追加して、支援技術による読み上げを避けることも検討できます。ただし、主題の区切りを示す意図がある場合は、そのまま使用するべきです。

    <hr aria-hidden="true" style="border-top: 1px dashed #ccc; border-bottom: none;">
  • 意味的な使用: hrタグは、あくまでコンテンツの主題の区切りを示すためのものです。単なる線の表示であれば、CSS の border-top や border-bottom プロパティを他の要素に適用する方が適切です。

hrタグの使用例

hrタグは、以下のような場合に用できます。

  • 記事やドキュメント内の主題の変更: 長い記事やドキュメントで、話題が大きく変わる箇所を示す。
  • 章やセクションの区切り: 複数の章やセクションを含むコンテンツで、それぞれの境界を視覚的に示す。
  • フォーム内のセクション区切り: 長いフォームを複数の意味のあるセクションに分割する（<fieldset>と<legend>の使用も検討する）
  • 引用文と本文の分離: 引用文の後に主題の区切りとして<hr>を挿入する。

<article>
  <h1>この記事のタイトル</h1>
  <p>最初の段落...</p>
  <p>次の段落...</p>

  <hr>

  <h2>関連情報</h2>
  <ul>
    <li>...</li>
    <li>...</li>
  </ul>
</article>

<form>
  <h2>個人情報</h2>
  <label for="name">名前：</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">メールアドレス：</label>
  <input type="email" id="email" name="email"><br>

  <hr>

  <h2>配送先情報</h2>
  <label for="address">住所：</label>
  <input type="text" id="address" name="address"><br>
  <label for="zip">郵便番号：</label>
  <input type="text" id="zip" name="zip"><br>

  <button type="submit">送信</button>
</form>

実際にブラウザに表示したら、下記のようになりました。
hrタグの使用例

hrタグの代わりとなる方法

視覚的な線を表示するだけであれば、hrタグの代わりにCSSを使用する方がより柔軟でセマンティックなマークアップになります。

要素のボーダー

区切りたい要素の下や上にCSSのborder-bottomやborder-topプロパティを適用することで、線を表示できます。
これにより、意味的な区切りではなく、単なる装飾であることを明確にできます。

.separator {
  border-bottom: 1px solid #eee;
  margin: 20px 0;
  padding-bottom: 20px;
}

<p>最初のコンテンツ。</p>
<div class="separator"></div>
<p>次のコンテンツ。</p>

hrタグの代わりにCSSを使う

まとめ

hrタグは、HTMLで主題の区切りを示すためのセマンティックな要素です。
デフォルトで水平線を表示しますが、そのスタイルはCSSで自由にカスタマイズできます。

レイアウト目的での多用は避け、コンテンツの構造的な区切りを示す場合に適切に使用しましょう。
単なる線の表示であればCSSのborderプロパティを使用するなど、状況に応じて適切なマークアップを選択することが重要です。

HTML
yasuaki

コメント