HTML Horizontal Rule Tag

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>

<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>

<hr width=50% size=10>
<p> This is a horizontal line 50 pixels in width and 10 pixels thick</p>

<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.