水平線の前後を空けたい場合は<p>(階段)タグを付けます。<p>タグがないと、
これに対して<p>タグを付けると以下のとおりです。
これは水平線の後です。
水平線
<hr>
HTMLでは標準的にブラウザのウィンドウ幅だけ水平線を引く<hr>タグが用意されています。こぼ節が変わる時やタイトルと本文を分ける場合などに用いられる<hr>タグは、ワンサイドタグで開始タグや終了タグがありません。
水平線の前
水平線の前
<hr>
水平線の後
水平線の後
これは水平線の前です。
水平線の前<p>
<hr><p>
水平線の後
拡張機能
HTMLの拡張機能として、水平線<hr>タグに４つの属性(オプション)が追加されました。水平線の厚み、横幅、位置、影を指定できるこれらの属性は、組み合わせて使用することも可能です。<hr size=n>
水平線の厚み
size属性で水平線の厚みをピクセル値で指定できます。
サイズ１
サイズ１
<hr size=1>
サイズ２
<hr size=2>
サイズ４
<hr size=4>
サイズ８
<hr size=8>
サイズ16
<hr size=16>
サイズ32
<hr size=32>
サイズ２
サイズ４
サイズ８
サイズ16
サイズ32
<hr width=n | n%>
水平線の横幅
width属性では水平線の横幅が指定できます。幅の指定方法としてnをピクセル値、あるいはn%をウィンドウ幅に対するパーセンテージで書き込む２通りがあります。
100ピクセル
100ピクセル
<hr align=left width=100>
200ピクセル
<hr align=left width=200>
300ピクセル
<hr align=left width=300>
400ピクセル
<hr align=left width=400>
500ピクセル
<hr align=left width=500>
200ピクセル
300ピクセル
400ピクセル
500ピクセル
10％
10％
<hr align=left width=10%>
25％
<hr align=left width=25%>
50％
<hr align=left width=50%>
75％
<hr align=left width=75%>
100％
<hr align=left width=100%>
25％
50％
75％
100％
<hr align=left | right | center>
水平線の位置
水平線の幅が文書幅より狭い場合、どの位置へ置くかをalign属性で指定します。指定できる位置はleftが左、rightが右、centerが中央です。
左、50％
<b>左、50％</b>
<hr align=left width=50%>
<b>中央、50％</b>
<hr align=center width=50%>
<b>右、50％</b>
<hr align=right width=50%>
中央、50％
右、50％
<hr noshade>
水平線の影
このnoshade属性は、水平線に影(Shade)を持たせないで黒く塗りつぶす時に用います。
影あり
影あり
<hr align=left width=50% size=6>
影なし
<hr align=left width=50% size=6 noshade>
影なし
<hr color>
水平線の色
インターネット･エクスプローラ(Microsoft社)などでは、color属性によって水平線の色を指定できます。ただし、この属性がサポートされブラウザはまだ少なく、ネットスケープなどでは機能しません。
赤い水平線
赤い水平線
<hr align=left color="#ff0000 width=50%">
黄色い水平線
<hr align=left color="#ffff00 width=50%">
青い水平線
<hr align=left color="#0000ff width=50%">
黄色い水平線
青い水平線