Using the Horizontal Rule Tag
A “horizontal rule” is an empty (single tag) element that places a horizontal line across the webpage. Using horizontal rules is very helpful when you want to break up the continuity of a webpage. For instance, if you have a webpage that has a substantial amount of content, using a horizontal rule makes the page more visually digestible, and the content easier to navigate.
The exact appearance of a horizontal rule will depend on the browser in which it is displayed. Most browsers will display a grey line between 1 and 3 pixels in height. The format of the horizontal rule can be altered using CSS styles if a different style is preferred.
Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!
The HTML
This HTML sample will consist of two separate horizontal rules:
<html>
<head>
<title>Horizontal Rules</title>
</head>
<body>
<h1 style="text-align: center">The Horizontal Rule</h1>
<br />
<hr />
<br />
<h2 style="text-align: center">The following document demonstrates the use of horizontal rules.</h2>
<br />
<hr />
<br />
<p style="text-align: center">As you can see, using horizontal rules help break up a document visually.</p>
</body>
</html>
The horizontal rules in the above code are separated by line breaks, and spaced accordingly to break up the content of the page. As you can see, the horizontal rule tag <hr /> is very simple tag that can be placed anywhere in the body of your HTML document.
A Few Last Words…
With the right positioning, horizontal rules are a very useful and easy to use tool in HTML. They provide organization and a sense of structure to the page. Join us next time for additional HTML tutorials!
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
rule.zip
