Lists

Lets take a look at ways to itemize lists, link to other documents, and insert multimedia into our pages.

Lists come in two flavors ordered and unordered. Ordered lists flow in sequence while unordered lists have no required, or meaningful, order. For example, a shopping list may be considered as an unordered list of you are not concerened with the order in which you find the items in the store.

The <ol> tag is used to create ordered lists, while the <ul> tag denotes unordered lists.

Lets create two lists one will be a grocery list and the other wil be instructions describing how to check out at the market.

Unordered List

First the grocery list. Open the unordered list:

<ul>

List items are surrounded by <li> tags like so:

<li>Asparigus</li>

<li>Milk</li>

<li>Tempeh</li>

And finally we close the unordered list:

</ul>

Ordered List

Secondly, we will list the checkout steps.

Open the ordered list:

<ol>

Insert the steps, each as a list item:

<li>Unload your shopping basket</li>

<li>Greet the cashier</li>

<li>Smile at the cute baby next to you in line</li>

<li>Pay the cashier</li>

<li>Gather your groceries and leave</li>

And now we close the ordered list tag:

</ol>