The <HR> tag places a shadowed line across the width of the Web browser's window.
As the size of the browser's window changes, the line also resizes itself to match the change.
Click here to review how the following document appears in a Web browser.
| <HTML> <HEAD> <TITLE>Enter the Page Title Here</TITLE> </HEAD> <BODY> <H1>This is Heading One</H1> <P>The is the content of Heading One. It is separated from the content of Heading Two by a horizontal line.</P> <HR> <H1>This is Heading Two</H1> <P>The content of Heading Two is also separated from the content of Heading One by the same horizontal line.</P> </BODY> </HTML> |
The <HR> tag also has its attribtes, which are summarized in the following table:
| Attribute |
Description |
size |
Sets the thickness of the horizontal line |
width |
Sets the width of the horizontal line as a measure
of pixels or percentage of the
Web browser's window |
align |
Justify the horizontal line to the left,
center, or right
of the Web browser's window |
noshade |
Cancel the "etched" effect of the
horizontal line |
Click here to review how the following document appears in a Web browser.
| <HTML> <HEAD> <TITLE>Enter the Page Title Here</TITLE> </HEAD> <BODY> Below is a horizontal line with default size <HR> Below is a horizontal line with size = 1 <HR size=1> Below is a horizontal line with size = 2 <HR size=2> Below is a horizontal line with size = 3 <HR size=3> Below is a horizontal line with size = 4 <HR size=4> Below is a horizontal line with size = 5 <HR size=5> <P></P> Below is a horizontal line with width = 400 pixels <HR width=400> Below is a horizontal line with width = 500 pixels <HR width=500> Below is a horizontal line with width = 600 pixels <HR width=600> Below is a horizontal line with width = 50% <HR width=50%> Below is a horizontal line with width = 60% <HR width=60%> Below is a horizontal line with width = 70% <HR width=70%> Below is a horizontal line with width = 80% <HR width=80%> Below is a horizontal line with width = 90% <HR width=90%> <P></P> Below is a horizontal line with width = 75% and align = left <HR width=75% align=left> Below is a horizontal line with width = 75% and align = center <HR width=75% align=center> Below is a horizontal line with width = 75% and align = right <HR width=75% align=right> <P></P> Below is a horizontal line with no "etched" effect <HR noshade> <P>Try to resize the Web browser's window to see how the length of the horizontal lines changes.</P> </BODY> </HTML> |
Resize the Web browser's window to see how the length of the horizontal lines changes accordingly.
