
HTML>HTML Basics>Horizontal Rule Tag
Heading Tag Paragraph Tag Line Break Tag Comment Tag Horizontal Rule Tag Block Quotes Tag
The Horizontal Ruler Tag
Horizontal ruled lines are used to separate different areas of a web page. The tag for a horizontal ruled line is <hr>. Just like the line break <br> tag, the horizontal rule tag is an empty tag. It does not have a closing tag.
You can also add certain attributes to the <hr> tag, such as WIDTH=n, for fixed pixel width or WIDTH=n% for a certain percentage of the screen wide, SIZE=n to make the line a certain pixel amount thick, and NOSHADE to turn the line's shading off.
A plain <hr> with no attributes will make the line the full width of the screen.
Example
Try it out for yourself!
Examine the HTML code below. Cut and paste the following HTML code into the form window below and press the check it out button to see the resulting webpage.
<html>
<head><title>Horizontal Ruler Tag</title></head>
<body><h1>The Horizontal Ruler Tag</h1>
<!--Adds a horizontal rule - the full size of the screen -->
<hr noshade>
<p>This is my very first webpage. So far I have been taught how to create a heading, a new paragraph, line breaks, add comments and now to separate sections of my page using horizontal rulers.</p>
<p> The following is a horizontal line 50% the size of the screen and 10 pixels thick</p>
<!--Adds a horizontal rule - 50% of the size of the screen, 10 pixels thick-->
<hr width=50% size=10>
<p> This is a horizontal line 50 pixels in width and 10 pixels thick</p>
<!--Adds a horizontal rule - 50 pixels in length, 10 pixels thick-->
<hr width=50 size=10>
</body>
</html>
Creating your own webpage
Follow these simple steps to create your own webpage and to view your created webpage in your browser.