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

HTMLの
タグとは？水平線でコンテンツを区切る方法を解説

HTMLの<hr>タグは、HTMLドキュメント内のコンテンツを区切るための水平線（罫線）を表示します。HTML5では、このタグは単なる視覚的な線ではなく、テーマの区切り（thematic break）を意味するセマンティックな要素として定義されています。なお、<hr>タグには終了タグが存在せず、<br>タグと同様に単独で記述します。

それでは、<hr>タグの実際の使用例を見ていきましょう。

使用例

<!DOCTYPE html>
<html>
<head>
<title>ドキュメントのタイトル</title>
</head>
<body>
   <h1>商品一覧</h1>
   <p>以下の商品を取り扱っています −</p>
   <h2>衣料品</h2>
   <p>衣料品には、Tシャツ、シャツ、ジーンズ、パンツ、フーディーなどが含まれます。</p>
   <hr>
   <h2>家電製品</h2>
   <p>家電製品には、携帯電話、携帯電話アクセサリー、ノートパソコン、デスクトップPCなどが含まれます。</p>
</body>
</html>

出力結果

HTMLの hr タグとは？水平線でコンテンツを区切る方法を解説

コードの解説

上記の例では、まず「衣料品」に関するセクションを設定しています。

<h2>衣料品</h2>
<p>衣料品には、Tシャツ、シャツ、ジーンズ、パンツ、フーディーなどが含まれます。</p>

続いて、<hr>タグを使用して、このセクションと次の「家電製品」セクションを区切っています。

<hr>
<h2>家電製品</h2>
<p>家電製品には、携帯電話、携帯電話アクセサリー、ノートパソコン、デスクトップPCなどが含まれます。</p>

補足ポイント

<hr>タグはHTML4では水平罫線（horizontal rule）を表す装飾的な要素でしたが、HTML5では意味的な「テーマの区切り」を表す要素に変更されました。線の色・太さ・長さなどを変更したい場合は、size属性やwidth属性などの非推奨属性を使うのではなく、CSSでスタイルを指定するのが推奨されています。

また、<hr>タグはChrome、Firefox、Safari、Edgeなど、すべての主要なブラウザでサポートされており、特別な設定なしに利用できます。話題が変わる箇所や、章・セクションの区切りとして活用すると、ドキュメントの構造がより明確になります。

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

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

  2. HTMLの<dfn>タグとは？定義用語のマークアップ方法を実例付きで解説

    HTMLの<dfn>タグは、専門用語や略語など「定義の対象となる語」が文書内で最初に登場する箇所を示すための要素です。多くのブラウザでは、<dfn>タグで囲まれた部分は斜体（イタリック体）で表示されます。 それでは、<dfn>タグの具体的な実装例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>MCAの科目一覧</h2> <p><dfn title="Master of Computer Applications"