【HTML】hr要素の使い方【段落の区切りを表します】

Program

hr要素を使えば、文章(段落)の区切りを示すことができます。

hr要素の使い方

以下のプログラムと、ブラウザの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hr要素</title>
</head>
<body>
    <p>国境の長いトンネルを抜けると雪国であった。</p>
    <p>夜の底が白くなった。信号所に汽車が止まった。</p>
    <hr>
    <p>読者にとって、この書き出しは想像力が掻き立てられます!</p>
</body>
</html>

body要素の中に、p要素とhr要素があります。

初めの2つのp要素として、小説「雪国」の冒頭の書き出しが記述されています。

そして、その2つのp要素の後に、hr要素を挟んで、3つ目のp要素である「読者にとって、この書き出しは想像力が掻き立てられます!」という、読者の感想が記述されています。

つまり、初めの2つのp要素の文章の内容と、3つ目のp要素の文章の内容は、切り替わった内容となっています。

ブラウザの表示結果にも示す通り、hr要素が記述された位置には、「内容の区切り」を示す横線が表示されます。

このため、hr要素は、テキストの段落を示す複数のp要素が連続して記述されている状態において、「内容の区切り」を示す必要がある際に、これら複数のp要素の間に挿入するように記述することで、「内容の区切り」をユーザーに示すことができます。

なお、HTMLの記述例を見てわかる通り、hr要素は、終了タグを付ける必要はありません。

各種ブラウザでの表示結果

hr要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
hr要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、hr要素の使い方について、ご参考になさってください。

タイトルとURLをコピーしました