HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLの水平線（hrタグ）とは？使い方とサンプルコードをわかりやすく解説

HTMLにおける水平線（horizontal rule）は、<hr>タグで表現されます。このタグを使うと、ページ内のコンテンツ同士を視覚的に区切ることができ、文章やセクションの境目を明確に示せます。

<hr>タグには終了タグが存在しない点に注意しましょう。つまり、</hr>のように閉じる必要はありません。また、このタグはHTMLページの<body>〜</body>タグ内に記述します。

hrタグの基本的な特徴

  • コンテンツをテーマごとに分離するための区切り線を表示する
  • 空要素（void要素）であり、終了タグが不要
  • HTML5では「話題の転換」を意味するセマンティックな要素として定義されている
  • CSSを使えば、線の色・太さ・スタイルなどを自由にカスタマイズ可能

サンプルコード

以下のコードを実行すると、HTMLページに水平線を追加できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Horizontal Rule</title>
   </head>

   <body>
      <p>ここにドキュメントの本文が入ります。</p>
      <hr>
      <p>ここに別のセクションを追加します。</p>
   </body>
</html>

表示結果

上記のコードをブラウザで開くと、2つの段落の間に横一線が引かれ、コンテンツがきれいに区切られていることが確認できます。

まとめ

<hr>タグは、HTMLページ内でコンテンツを視覚的かつ意味的に分割するためのシンプルで便利な要素です。終了タグが不要な空要素であるため、手軽に使えるのも魅力です。デザインを細かく調整したい場合は、CSSと組み合わせて活用するとよいでしょう。

  1. HTMLのdlタグとは？記述リストの作成方法をサンプルコード付きで解説

    HTMLのdlタグとは HTMLの<dl>要素は、記述リスト（description list）を定義するために使用されるタグです。HTML5では<dl>は「記述リスト」を表しますが、HTML4では「定義リスト（definition list）」として扱われていました。この違いを理解しておくと、より適切なマークアップができるようになります。 記述リストは、用語とその説明をセットで表示したい場合に便利な要素で、用語集、FAQ、メタデータの表示など、さまざまな場面で活用できます。 dlタグの基本構造 <dl>タグは、以下の2つの要素と組み合わせて使用します。

  2. HTMLのembedタグとは？使い方と主な属性をわかりやすく解説

    <embed>タグとは<embed>タグは、HTML文書の中に外部アプリケーションやプラグインコンテンツ（PDFファイル、動画、音声など）を埋め込むための要素です。開始タグのみで構成され、基本的に終了タグは不要です。<embed>タグで使用できる主な属性は以下の通りです。height：埋め込むコンテンツの高さをピクセル単位で指定します。src：埋め込む外部ファイルのアドレス（URL）を指定します。type：埋め込みコンテンツのメディアタイプ（MIMEタイプ）を指定します。例：「application/pdf」など。width：埋め込むコンテンツの幅をピクセル