Home HTML and CSS Tutorials The Basics of HTML

The Basics of HTML

Author: Selena Sol More by this author

Added: Oct 10, 2005 Rating:

Level: All levels Software: Dreamweaver

Ordered Lists

Ordered lists allow you to create lists with various bullet styles which reflect the level of hierarchy.
The basic ordered list involves three tags
The <OL> tag is used to open a list. The <LI> tag is used to signify a list element, and the </OL> tag is used to end a list.
For example, the following code could be used to create a list:

<HTML>
<HEAD>
<TITLE>Unordered List</TITLE>

</HEAD>
<BODY>
<B>Food</B>

<OL>
<LI>Vegetables

<OL>
<LI>Broccoli

<LI>Carrot
<LI>Pea
</OL>

<LI>Meat

<OL>

<LI>Chicken
<LI>Beef
<LI>Pork

</OL>

</OL>
</BODY>
</HTML>

The previous code would produce the following HTML list. Notice that the bullets are numbered according to their level in the hierarchy:

Food

Vegetables
1. Broccoli
2. Carrot
3. Pea

Meat
1. Chicken
2. Beef
3. Pork

Modifying the Bullet

You can modify the look of the bullets by using the TYPE or START attributes in the <OL> tag.
The TYPE attribute supports the following values: A, a, I, i, or 1.
The START attribute specifies at what point to start counting from.
Below is some code that demonstrates the usage of the TYPE and START attributes.

<HTML>
<HEAD>

<TITLE>Unordered List</TITLE>
</HEAD>
<BODY>
<B>Food</B>

<OL TYPE = "A">
<LI>Vegetables

<OL TYPE = "a">
<LI>Broccoli
<LI>Carrot
<LI>Pea
</OL>

<LI>Meat

<OL TYPE = "a" START = "2">

<LI>Chicken
<LI>Beef
<LI>Pork
</OL>

</OL>
</BODY>
</HTML>

The previous code would appear as follows:

Food

Vegetables
1. Broccoli
2. Carrot
3. Pea

Meat
1. Chicken
2. Beef
3. Pork

Notice that in this circumstance, the case of the TYPE argument matters.

Definition Lists

Definition lists allow you to create lists that are more like glossary entries than hierarchies.
The basic definition list involves three tags
The <DL> tag is used to open a definition list. The <DT> tag is used to signify a definition term, the <DD> tag is used to signify a definition term description, and the </DL> tag is used to end the list.
For example, the following code could be used to create a definition list:

<HTML>
<HEAD>
<TITLE>Definition List</TITLE>
</HEAD>
<BODY>
<B>Food</B>

<DL>
<DT>Vegetables
        <DD>Vegetables are very good for you. They
        contain all sorts of essential vitamins.  Of course,
        they taste terrible, so any self-respecting cyborg would
        take vitamins instead.
<DT>Meat
        <DD>Meat contains lots of proteins that your
        body needs.  Of course, in the modern world, the
        way we get meat to the grocery store is exceptionally
        immoral.  You'll just have to make the decision for
        yourself.
</DL>
</BODY>
</HTML>

The previous code would produce the following HTML list.

Food

Vegetables Vegetables are very good for you. They contain all sorts of essential vitamins. Of course, they taste terrible, so any self-respecting cyborg would take vitamins instead. Meat Meat contains lots of proteins that your body needs. Of course, in the modern world, the way we get meat to the grocery store is exceptionally immoral. You'll just have to make the decision for yourself.

Exercise Four