HTML: Lists (Part 1)

 

An Ordered List

Using an ordered list can be useful when you have information to convey in a numbered format. An advantage of using a list is that it is possible to add or delete a list element without worrying about the numbering.

You begin an ordered list with the tag <OL> (for "ordered list"), and you conclude the list with </OL>. Each list element begins with <LI> (for "list element").

 

Example

Here's an example of an ordered list:

<ol>

<u>The Top 5 Dogs I'd Like To Have</u>

<li>Newfoundland

<li>Labrador Retriever

<li>Golden Retriever

<li>Basset Hound

<li>Saint Bernard

</ol>

to see this how this code looks in a window.

 

An Unordered List

An unordered list can be useful when displaying a list that doesn't need numbering.

You begin an unordered list with <UL> (for "unordered list"), and you conclude the list with </UL>. Each list element begins with <LI>.

It is possible to "nest" lists, to put one list inside another. The following example models the nesting of lists. The optional indenting of the three inner lists helps someone looking at your code to understand the structure of the code.

 

Example

Here's an example of a nested unordered list:

<ul>
<u>Planets of the Solar System</u><br>
<li>Mercury<br>
    <ul><br>
    <li>57.9 million kilometers from the Sun<br>
    <li>no satellites<br>
    </ul><br>
<li>Venus<br>
    <ul><br>
    <li>108 million kilometers from the Sun<br>
    <li>no satellites<br>
    </ul><br>
<li>Earth<br>
    <ul><br>
    <li>149.6 million kilometers from the Sun<br>
    <li>one satellite (the Moon)<br>
    </ul><br>
</ul><br>
to see this how this code looks in a window.

 

 

Other Resources

Try these links on Lists:


Page Link
<OL> Tag www.htmlhelp.com/reference/html40/lists/ol.html
<UL> Tag www.htmlhelp.com/reference/html40/lists/ul.html
<LI> Tag www.htmlhelp.com/reference/html40/lists/li.html

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on either 1) your web page, or 2) the eEverything.com page. Add a nested list, either ordered or unordered. Have at least three elements in the outer list and at least two elements in each inner list.

If you work on eEverything.com, the outer list could be "Leather Moccasins," "the new CD by Taylor Perry" and "REI Backpacks." For the inner list for each item, give a price, whether or not this is a sale price (you decide) and an enthusiastic blurb (that you make up) about why the viewer should buy this item.