The HTML Format Tags - Nested and Horizontal Rule Tags

Guest Author - Diane Cipollo

There are several HTML tags that control the look and format of your webpage. One example is the bold tag that you read about in an earlier article. Remember that you used the bold tag to make text appear boldface or dark? But maybe you need even more control over the format of your webpages. That’s what we will talk about in this tutorial. As with all HTML tags, in the format tags the element name of each tag is surrounded by angle brackets.

Nested and Horizontal Rule Tags

Nested Tags

You might be wondering if you can use more than one formatting tag on the same section of text. Yes, this is called nesting. To nest two tags together, you will place the opening and closing tags of the second tag inside the opening and closing tags of the first tag. For example, you might want to use both the italic and bold tags together. To do this, you will place the opening bold tag in front of the section of text and the closing bold tag after the section of text. Then you will go back and place the opening italic tag in front of the opening bold tag and the closing italic tag after the closing bold tag.

Correct
section of text

Incorrect
section of text

<hr>The Horizontal Rule Tag

The horizontal rule tag will create a horizontal line across the entire width of the webpage. Notice that there is no closing tag. The default style of the line will differ depending on which browser your visitor is using. In newer browsers, those supporting Cascading Style Sheets, you have a lot of control over how the line appears on the screen. But when using only HTML, you can control five attributes; noshade, color, size. width and align.

<hr>
This will result in a line across the entire width of the page and in the default slightly 3D style. If the <hr> tag is placed inside a <table> cell, as it is in this article, the line will go across the entire width of the table cell.
<hr noshade>
This will result in a line across the entire width of the page without the 3D style.
<hr width="50">
Result is a line that is 50 pixels in lenght. The width attribute can be set in pixels or percent.
<hr width="50%">
This will result in a line that is 50 percent of the width of the page.
<hr width="50" align="center">
This will result in a line that is 50 pixels and centered on the page. You can also set the align attribute to right and left.
<hr width="50%" size="20">
The size attribute controls the height of the line in pixels.
<hr color="#c00000">
The color attribute controls the color of the line. You can use color words such as yellow or red. You can also use the hexidecimal color code. This does not work in all web browsers. In that case, your reader will see the default gray 3D line.

← Back

Nested and Horizontal Rule Tags

<i><b>Nested Tags</b></i>

<hr>The Horizontal Rule Tag