Web Design Tutorials

HTML Bullets and Lists

You can insert a list onto your page with HTML. There are two types of lists to choose from: Ordered List and Unordered. An Ordered list is one that uses number, letters, roman numerals, or a combination. Like this:

1. Item One
2. Item Two
3. Item Three

1. Item One
2. Item Two
3. Item Three

• Item One
• Item Two
• Item Three

To get a list with numbers or letters, this tag is used:

<OL>

</OL>

The OL stands for Ordered List, of course. But those two tags won't get you a list. You need to include another tag, the <LI> tag. LI stands for List Item. You need one <LI> tag for every item in your list. So for three items, the code is this:

<OL>
<LI>Item One
<LI>Item Two
<LI>Item Three
</OL>

To get the bulleted list, the <UL> tag is used. UL stands for Unordered List. It's used in exactly the same way. Just substitute the OL tags for UL tags.

To use the HTML Editor to insert a list, do the following:

However, the editor will give you only one <LI> tag, so you'll have to type the others yourself. Note that the <LI> tag doesn't need an end tag.

For both the Ordered and Unordered list, you can specify which type you want to use for the bullets or numbers. The types are these:

Ordered List Types (Numbers is the default)

	Capital Letters 		A
	Lowercase letters 		a
	Capital Roman Numerals 		I
	Lowercase Roman Numerals 	i
	Numbers 			1

You use the Types like this:

<OL TYPE = A>
<LI>Item One
<LI>Item Two
<LI>Item Three
</OL>

You can specify a start, as well. But the start has to be a number:

<OL TYPE = A Start = 7>
<LI>Item One
<LI>Item Two
<LI>Item Three
</OL>

So that List will be uppercase letters, starting at the 7th letter, or "G".

Unordered List Types

There are three types of bullets you can use: Disc, Circle, Square.

Try out the various lists in your editor, and add the different types to the code. That way you will get a feel for how they are used, and what they look like.

In the next part, we'll see how to add a Horizontal Rule to a web page.

<-- Back One Page Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses