Horizontal Rule tags can be used to divide content into meaningful groupings. Size determines the height of the rule in pixels. Width can be expressed as pixels or as a percent.
Type the code below into any text editor and save it with the name "lesson11.html" in your "mySite" folder. You may view the completed lesson in a new window by clicking here . After your create this page, open it in your Web browser.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Lesson 11: Horizontal Rules</title>
</head>
<body bgcolor="white">
<h1>Horizontal Rules</h1>
<p>Here is a simple horizontal rule with no special formatting.</p>
<hr />
<p>Here is a left aligned horizontal rule that occupies 50% of the page.</p>
<hr align="left" width="50%" />
<p>Here are a group of horizontal rules at 450, 400, 350, 300, 250, 200,
150, 100, and 50 pixels each. These are centered.</p>
<hr align="center" width="450" size="9" />
<hr align="center" width="400" size="8" />
<hr align="center" width="350" size="7" />
<hr align="center" width="300" size="6" />
<hr align="center" width="250" size="5" />
<hr align="center" width="200" size="4" />
<hr align="center" width="150" size="3" />
<hr align="center" width="100" size="2" />
<hr align="center" width="50" size="1" />
</body>
</html>
The horizontal rule is a self-closing tag in XHTML. Use <hr /> to create a self-closing tag just as you do with the <br /> tag in XHTML.
By default, a horizontal rule will occupy the complete width of the page. You can specify a width using percentages or pixels. You can specify the height using the size attribute.
Be careful not to overuse the horizontal rule. If you find you need to separate a lot of content on a page, you would probably do better to divide your content into several smaller pages.