Ordered and Unordered Lists

Web Design – Section 3-4

Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

Objectives

The Student will: Be able to create an ordered and

unordered list using XHTML. Be able to apply the concepts of nesting.

Lists

The most common HTML lists are either ordered lists <ol> or unordered lists <ul>. Ordered lists are typically displayed

with numbers Unordered lists are typically displayed

with bullets.

Lists Lists are a great example of nested

HMTL tags. All lists begin with <ol> or <ul> List items all need to be included

between <li> and </li> The list is then ended with </ol> or

</ul> Think about indenting your lists to

clearly see the beginning and ending tags

Example The list of the best baseball teams in

the Chicago area would be:<ol>

<li> <strong> CUBS! </strong></li><li> Kane County Cougars </li><li> Joliet Jackhammers </li><li> White Sox </li>

</ol>

Example

The result is…

Summary

Ordered Lists <ol> and unordered lists <ul> and the list items are nested tags.

Indent and use white space to keep your code clean and to allow you to easily find opening and closing tags

Rest of Today

Follow the directions on the handout to add both an unordered and ordered list to your web page.