HTML: Lists

There are two different types of lists we'll concern ourselves with in this course. Unordered Lists and Ordered Lists.

Unordered Lists
Just as you might create an bullet point list using something like Microsoft Word, so can you in your HTML document. To do so you will use two types of tags.

<ul> is placed at the START of the list. It refers to an unordered list.
<li> is placed BEFORE every item in the list. It refers to a list item.
</li> is placed AFTER every item in the list
</ul> is placed and the END of the list

Here is how it looks in practice:

<ul>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
</ul>

And here is how that appears in the browser:

• January
• February
• March
• April

A couple of things to note. First the browser will leave a blank line before the beginning of the list and another at the end of the list. Also that the list will be indented a fair amount from the left-hand margin.

Ordered Lists
Similiar to Unordered Lists, Ordered Lists are preceeded by a numeric value. Instead of using a <ul> tag, we use an <ol> tag.

<ol> is placed at the START of the list. It refers to an ordered list.
<li> is placed BEFORE every item in the list. It refers to a list item.
</li> is placed AFTER every item in the list
</ol> is placed and the END of the list

Here is how it looks in practice:

<ol>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
</ol>

And here is how that appears in the browser:

1. January
2. February
3. March
4. April

Nested Lists
This is not another type of list. Rather it is a technique for placing one list with another. The common characteristic displayed when doing this is that the nested list is further indented from the primary list. Here is an example of how it is displayed:

1. January
2. February.
3. March
   • 15 - Ides of March
   • 17 - St. Patricks Day
4. April

The HTML for the above follows below. Note the correct places where the nested list begins and ends. Also note that although the example shows an ordered list nested within an ordered list, you can nest them oppositely or nest ordered within ordered and unordered within unordered -- or any combination or number of lists. The important part is to ensure you nest properly.

<ol>
<li>January</li>
<li>February.</li>
<li>March<!— note that this list item is not closed here —>
<ul>
<li>15 - Ides of March</li>
<li>17 - St. Patricks Day</li>
</ul></li><!— the parent for the nested list is actually closed here —>
<li>April</li>
</ol>

Styling Lists
Perhaps you don't want the default disc bullets or a numbered list? Perhaps you want squares or letters or roman numers?? Well, you can have these by setting a property of list-style-type as part of the ordered or unordered list tag. Here is a couple of examples followed by a list of possible propery values:

<ol style="list-style-type: upper-roman;">
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
</ol>

1. January
2. February
3. March
4. April

<ul style="list-style-type: square;">
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
</ul>

• January
• February
• March
• April

The other values you may want to experiment with are:

For more information on Ordered lists refer to: http://reference.sitepoint.com/html/ol
For more information on Unordered lists refer to: http://reference.sitepoint.com/html/ul