Exercise 2 Demo: Part A : Lists
Always start your HTML document with the DocType and the 4 Basic HTML tags we covered in Exercise 1.
This is the HTML you will need add for Part A of Exercise 2. This lesson is about using list tags. We will start with the unordered list which is marked with a bullet instead of a number.
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>
Bread
<li> </li>
Meat
<li> </li>
Cheese
<li> </li>
Tomatoes
<li> </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>
Bread
<li> </li>
Meat
<li> </li>
Cheese
<li> </li>
Vegetables:
<li> </li>
Tomatoes
<ul>
<li> </li>
Lettuce
<li> </li>
Carrots
<li> </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.
Go to Part B of Demo 2.
Go to the Exercise 2 page.
© Claudia Faulk. Updated 8.17