HTML Cookbook Basic HTML Course

Alternate version

Lists, Part 1

He's making a list and checking it twice ... and so can you!

There are 3 kinds of lists that you can make with HTML

• ordered list
• unordered list
• definition list

They are all block level container elements (you can't use them inside paragraphs).

The ordered list and the unordered list are very much alike, so we'll cover them together. They both use
<li>...</li>
for the items in your lists. You must enter your items in the order that you want them in.

Ordered lists put your items in order with numbers, letters, etc.

Unordered lists mark your items with a bullet, so they are also known as bulleted lists.

Ordered List: <ol>...</ol>

<ol>List of items
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ol>


makes a list that looks like:

List of items
1. 1st item
2. 2nd item
3. 3rd item

Unordered List: <ul>...</ul>

<ul>List of items
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ul>


makes a list that looks like:

List of items
• 1st item
• 2nd item
• 3rd item

Mix and Match

You can nest lists and you can mix types of lists.

Nested, same type

<ul>Susie
<li>Toys</li>
<ul>
<li>Barbie doll</li>
<li>hula hoop</li>
<li>crayons</li>
</ul>
<li>Clothes</li>
<ul>
<li>hat</li>
<li>scarf</li>
</ul>
</ul>


makes a list that looks like:

Susie
• Toys
• Barbie doll
• hula hoop
• crayons
• Clothes
• hat
• scarf

Nested, mixed types

<ul>Bobby
<li>Toys</li>
<ol>
<li>yo-yo</li>
<li>top</li>
<li>model airplane</li>
</ol>
<li>Clothes</li>
<ol>
<li>mittens</li>
<li>boots</li>
<li>top</li>
</ol>
</ul>


makes a list that looks like:

Bobby
• Toys
1. yo-yo
2. top
3. model airplane
• Clothes
1. mittens
2. boots

In Part 2, we'll discuss Definition Lists.

Happy coding!
Gnubee

Links

Tips
Tools
References
Rules
HTML Help Gnubee - Newsgroup