Basics of HTML

Basic Organization: Internal Links, Page Dividers

Organizing a Page with Dividers

Divider bars can be very useful in visually breaking up long sections of text. The simplest kind is called a horizontal rule and is inserted with an HTML tag: <hr />. This places a thin line in your display:


You can specify the width of the line via a style attribute. Although you can specify the width in pixels, I don't recommend this because of varying window sizes among your readers. Specifying a percentage is better:

<hr style="width:50%" />

This would make your line extend half-way across your page.

You can also modify other line attributes, such as thickness and margins surrounding it, with a style statement. A sample is here at W3Schools.

The most useful attribute is thickness; sometimes you need more than a 1 pixel-thick line, which is the default. This is how you make your line thicker:

<hr style="border-width:7px; width:100%" /> would make a 7 pixel thick line across the whole page:


To make a colored line, add the attribute "border-color" with a color word or code as a value to the style statement.

For other variants, use different values for the border-style attribute. See the list here at W3Schools.

Different browsers interpret some of these <hr /> attributes differently and you can read about this example of children not playing together nicely here

line

More elaborate dividers can be used as well, limited only by your own good taste and/or artistic talent. Graphics files as dividers are inserted just as other images are, with <img src /> tags. It might be tempting to elongate divider bar images to 100% as you would do with an <hr /> but, as with other images, it's not a good idea to use HTML attributes for re-sizing. If you try to stretch out a graphic beyond its natural size it can end up looking pretty ugly.

(Aligning a graphic in the center of the page, like the train bar just above, is a more complicated task than you'd think. HTML editors can do it easily for you, but if you look at the source code they use it might be a deprecated (or "old") HTML attribute or a rather complicated style statement, not just a simple "center." Here is a clear, detailed, but complicated, explanation of this issue that is somewhat dated. W3Schools tells you how to do it relatively simply with margins here, but there are browser incompatibility issues. Shouldn't this be simpler? Perhaps it will be more satisfactorily resolved in future standards revisions. In the meantime, I would just click on your editor's text-center button and not worry about it beyond that.)

In various boxes throughout this guide you'll see some relatively plain bar graphics I got from Realm Graphics, a free graphics site. Here are some more, with more flair. Let your imagination—tempered by editorial judgement—run free!

line of wire

squiggly line

day-night line

line of feet

Note on Frames

Frames are no longer supported by HTML 5, the current version of standards.Therefore, they should not be used. There are better and easier ways now to accomplish the organizational purposes for which you used to have to use frames.

Graphics Credits

The cute little train graphic line on this page, as well as the example lines in the box above, came from Realm Graphics, a nice free graphics site.

Last updated:

Back to kathyamen.net