ページ上のコンテンツを分割する水平線の追加

Web文書にHRタグを使用する方法

HRタグは、従来、ウェブ文書に水平線(水平規則とも呼ばれる)を追加するために使用されてきました。 行を追加するには、次のように入力します。


:デフォルト設定を使用して、ページまたは親要素の幅全体にわたって行を描画するようにブラウザに指示します。 このデフォルトの行はシンプルで目的に合致していることがよくありますが、属性を割り当てて行のサイズ、色、位置を変更することができます。 HTML4とHTML5の間で、水平線の外観を変更する方法が変更されました

HRタグは意味論的ですか?

HTML4では、HRタグはセマンティックではありませんでした。 意味要素は、ブラウザと開発者が容易に理解できるという意味でその意味を記述する。 HRタグは、ドキュメントに単純な行を追加する単なる方法でした。 行を表示したい要素の上端または下端の境界線のみをスタイリングすると、要素の上部または下部に水平線が配置されますが、一般的に、HRタグはこの目的のために使いやすくなりました。

HTML5から、HRタグが意味を持つようになりました。これで、段落レベルのテーマブレークが定義されます。これは、新しいページや他のより強力な区切り文字を保証しないコンテンツの流れの中断です。トピックの変更です。 たとえば、ストーリー内でシーンが変更された後にHRタグが見つかるか、リファレンスドキュメントのトピックが変更されたことを示すことができます。

HTML4とHTML5のHR属性

HTML4では、HRタグに「align」、「width」、「noshade」などの単純な属性を割り当てることができます。 アライメントは左、中央、右または正当に設定できます。 幅は、水平線の幅を、ページを横切る線を延長したデフォルトの100%から調整しました。 noshade属性は、影付きの色ではなく単色の線を描画しました。 これらの属性はHTML5では廃止されており、CSSを使用してHTML5でHRタグのスタイルを設定する必要があります。 たとえば、HTML 4の場合:


高さ10ピクセルの水平線を生成します。

HTML5でCSSを使用すると、高さ10ピクセルの水平線がスタイルされます。


CSS使用して水平線をスタイルすると、ウェブページを自由に設計できます。 HRタグのスタイルの多くの例を、このスタイルのHRタグの記事で見ることができます。 幅と高さのスタイルのみがすべてのブラウザで一貫しているため、他のスタイルを使用する場合は試行錯誤が必要な場合があります。 デフォルトの幅は、常にWebページまたは親要素の幅の100%です。 ルールのデフォルトの高さは2ピクセルです。