Indents & Separators

In this chapter, we look at two formatting commands. The first is the <hr> tag, which creates a horizontal "rule" or line; and the second is the <blockquote> tag, which creates a full-left and full-right indent.


Sometimes you will want to create a divider between vertical sections on your web page. One way is to simply add a flat, wide image, such as one like this:

The problem with that is that you need the exact image for it, and if it is not perfectly rectangular, the background color or image might be a problem. It can look nice, though.

Sometimes, however, you just want a simple line dividing sections. For that, the <hr> command will do. Here's what it looks like, just plain:

As you can see, very plain--just a pixel thick, running across the width of the area.

The <hr> tag, however, has several attributes which can help add variety to the line:

Attribute Values Default Description
width= "400" or "50%" 100% Sets the width, in pixels or percent of the available space
size= "3" 1 Sets the thickness of the line, in pixels
color= "colorname" black Sets the color, takes away the shaded 3-D effect
align= "left" or "center" or "right" left or center, depending on the browser Sets the alignment of the line within the available space

Here are some sample lines, followed by the code that created them:

<hr width="50%" size="2" color="darkblue" align="center">

<hr width="30%" size="5" color="#bb9999" align="left">

<hr width="200" size="1" color="red" align="right">

<hr width="650" size="10" color="gray" align="center">

One last note: the <hr> command is a breaking tag, which means that it includes line breaks as a part of its form. It cannot be used one the same line (left or right) as another element without CSS coding being used.


Next, we have the <blockquote> tag. This serves as a left and right indent. Note that it is not a "first line" or "hanging" indent, but instead is a full-paragraph indent.

Additionally, the <blockquote> tag is additive, like the <big> and <small> tags--that is, the effect increases when you repeat the tag. Each time the tag is used, the left and right margins are moved another 0.5 inches inward; each time you end the tag, the margins moves back to the outside by 0.5 inches.

Let me demonstrate:

This paragraph uses a single <blockquote> tag; note that the left margin is indeed at one half of an inch. This effect can be used either to indent normally, or to create space between the edge of the page and the text.
Here is an example of two <blockquote><blockquote> tags used together, to create a full-one-inch margin on both the left and the right. If this were an academic essay, this could be used for long quotations, more than four lines in the text.
Here we are again, but this time with three <blockquote><blockquote><blockquote> tags used together, to create a one-and-a-half-inch margin on both the left and the right. You could keep on going, adding more and more blockquote tags until there is no more room left for text!

Don't forget--you must end as many blockquotes as you started in order to bring the text fully back to the normal margins.

<blockquote> tags can only create margins on both sides; the tag will not create left-only or right-only indents. Using CSS, however, you can create indents on just one side--and you can create first-line or hanging indents as well.

OK, time to experiment! Use the Live Exercise below to practice the <hr> and <blockquote> tags.



Video Review