Finalhost.com free design,development-list attributes

The method in customizing lists to change the appearance of lists by using conventional HTML attributes.

Modifying list bullets

Each browser is free to pick the kinds of bullets it places in front of list elements. Usually, the bullet style changes for nested lists, but the pattern of bullets used is up to the browser as well. To give you at least a bit of control, you can use the type attribute with the <UL> tag to specify the kind of bullet you'd like to use for each unordered list you create.

The value of the type attribute is either circle, disc, or square. All of the items in the list will be given the desired bullet. Here are three lists, each using a different bullet:

This list
uses
type=circle

This list
uses
type=disc

This list
uses
type=square

If you want to get fancy, you can use different bullets for each element in the list. Just use the type attribute with each <LI> tag within the list. Once you change the bullet for an item, all subsequent items will use the same bullet until you change it again. Here's a list showing this:

This item has type=circle
and this item gets a circle, too.
This item has type=disc
and this item gets a disc, too.
This item has type=square
and this item gets a square, too.

Modifying numbering styles

If the type attribute customizes unordered lists, it stands to reason that it works on ordered lists as well. In fact, you can select five different numbering styles for your ordered lists: upper and lower case letters, upper and lower case Roman numerals, and regular numbers.

In these cases, the value of the type attribute should be one of these characters:

`1`	Arabic numerals (1, 2, 3, ...)
`A`	Upper case letters (A, B, C, ...)
`a`	Lower case letters (a, b, c, ...)
`I`	Upper case Roman numerals (I, II, III, ...)
`i`	Lower case Roman numerals (i, ii, iii, ...)

If you apply the type attribute to the <OL> tag, all the items in the list will have the same numbering style. You can apply it to individual list items as well, to change format in midstream:

This has type=1
This has type=A
This has type=a
This has type=I
This has type=i

Notice that the number format changes, but that the item values do not.

Changing the number sequence

If you need to start a list at a value other than 1, or need to number items other than sequentially, use: The start and value attributes will do just what you need.

Use the start attribute with the <OL> tag to set the list starting value to any non-negative value. To start a list at 7 (or G, g, VII, or vii), you just add start=7 to the <OL> tag. Subsequent items will be numbered 8, 9, and continue on.

If you want to change the values of individual list items, use the value attribute with the <LI> tag. This changes the item's number to the desired value, but subsequent items continue to be numbered sequentially beyond this value. You can change an item's value to 20 by adding value=20 to the <LI> tag, but there is no way to change the numbering scheme to increment by anything other than one.

There's plenty of ways to use the type, start, and value attributes to customize your lists with HTML. However; you can do a lot more to make your lists unique using styles instead of HTML attributes.

Back to: Creating / Maintaining Index