Step 9 – Horizontal Rule

Last update: February 15 2019

When you use large amounts of text in HTML, you can divide your text into a sections by using a horizontal rule <HR>:

<html>
<head>
<title>my own homepage</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial">
<H2>A short introduction</H2>
<p>Nora Tol started offering webdesign services since the <u>middle of the 90s</u> with her
first company <i><font color="#ff9b6A">Nora Tol Virtual Publishing</font></i> and, now,
with her second company,
<i><font color="#ff9b6A">ElNorado Productions</font></i></p>
<p><u>By growing demand</u>, she expanded her services with designing logos, hosting,
online marketing and even creating online content.</p>
<p>Take a look at her website for more information.<br /><b><font size="4">Or get in
touch</font></b>.</p>
</font>
<hr>
</body>
</html>

Using the tag like this, the browser shows standard grey line. This is an open line with a bit of depth by adding a little bit of a shadow. The depth won’t show in its default setting.

Adjust Size

When adding a SIZE you can make this visible. For example:

<hr size=”5″>

Fill The Line

This will increase the line’s height to about 5 pixels, but it will remain open. You can fill it by using:

<hr noshade>

Adjust Width and Color

But, there’s more you can adjust:

<html>
<head>
<title>my own homepage</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial">
<H2>A short introduction</H2>
<p>Nora Tol started offering webdesign services since the <u>middle of the 90s</u> with her
first company <i><font color="#ff9b6A">Nora Tol Virtual Publishing</font></i> and, now,
with her second company,
<i><font color="#ff9b6A">ElNorado Productions</font></i></p>
<p><u>By growing demand</u>, she expanded her services with designing logos, hosting,
online marketing and even creating online content.</p>
<p>Take a look at her website for more information.<br /><b><font size="4">Or get in
touch</font></b>.</p>
</font>
<hr width="50%" color="#000000" noshade size="2">
</body>
</html>

I’ve chosen for a line with the height of 2 pixels (SIZE=”2″), filled it with a solid black (NOSHADE COLOR=”#000000″) and I’ve also defined the line to use half of the screen width (WIDTH=”50%”). It’s possible to set a width in pixels too, for example WIDTH=”400″.

The HR-tag contains white spacing, by default.

Change Alignment

You can also add an alignment to the Horizontal Rule. You can choose from center, left or right:

<hr align=”center”>
<hr align=”left”>
<hr align=”right”>

You’ll either rarely use this tag, or a lot. It can make a lot of sense if you’re building websites allowing people to comment on its content, or leave a review. You can split all the responses by a Horizontal Rule.

Go to Step 10

Bookmark the permalink.

Comments are closed.