List Tags

There are several different types of lists that we will work with. Unordered Lists, Ordered Lists and Definition Lists.

Lets start with the Unordered List. It requires a pair of tags <ul> and </ul>. You open a <ul> tag, nest all the list items and when you are finished with your list you close with the </ul> tag.

Each entry in the list is enclosed within a list item <li> </li> tag pair.

Your HTML will look like this:

Groceries:
<ul>
<li>Bread </li>
<li>Meat </li>
<li>Cheese </li>
<li>Tomatoes </li>
</ul>

On your web page it will look like this:

Groceries

• Bread
• Meat
• Cheese
• Tomatoes

The black bullet or disc is the default marker for each list item. To select an alternate shape you can add one of these attributes to the code: type="square" or type="circle" in the opening <ul> tag. Here is the same list with <ul type="square">

Groceries

• Bread
• Meat
• Cheese
• Tomatoes

You can also nest one list in another:

Groceries:
<ul>
<li>Bread </li>
<li>Meat </li>
<li>Cheese </li>
<li>Vegetables: </li>
     <ul>
     <li>Tomatoes </li>
     <li>Lettuce </li>
     <li>Carrots </li>
     </ul>
</ul>
Be sure you close out each list item and also each unordered list.

You may want to try this:

• How about indenting some text using an unordered list.
• Do you think you can indent even further than this?
• Can you figure out how I did it?

Be sure you close as many </ul> unordered lists as you open.