left-pointing arrow for navigating to previous page

HTML Tutorial: Lists

right-pointing arrow for navigating to next page

Unordered (<ul>) and Ordered (<ol>) Lists

These are so simple, I'll just give you examples. Unordered first:

HTML


    <ul>
        <li>list item</li>
        <li>Tom</li>
        <li>Dick</li>
        <li>Harry</li>
    </ul>

In Browser

list item
Tom
Dick
Harry

`Experiment with Type (type=) Attribute`

Got that? On your own, build a short, unordered list. Then add the type attribute inside the <ul> tag. Try it with each of the three options:


    <ul type=circle>
    <ul type=disk>
    <ul type=square>

Concerned that you won't remember those type attribute values? I don't remember things I don't use often. That's why I made the HTML Poster. It remembers for me. You can take a look at it now, if you're curious. It's the final topic before the Advanced topics. Attributes and their values are listed alphabetically in the bottom half of the poster.

`Make an Ordered List`

Now change <ul> and </ul> tags to <ol> and </ol>. Drop the type attribute. You should get something like:

Numbered list showing 1. Tom, 2. Dick, 3. Harry

`Ready for a Challenge?`

(Challenges are not supposed to be simple.) Create an outline, like this one:

Major division
1. Major subdivision
  1. Minor subdivision
  2. Another minor subdivision
  3. Etc.
2. Another major subdivision
3. Etc.
Another major
Etc.

Four hints:

You can put almost anything inside your <li> ... </li> tags. Here you're seeing ordered lists inside ordered lists.
The <li> tag accepts a type attribute. By default you get <ol type='1'>. The choices include:
- 'I' (Roman numeral, capitals)
- 'i' (Roman numerals, lowercase)
- 'A' (English capitals)
- 'a' (English lowercase)
- '1' (numbers)
Don't do this sort of work all at once. Start with just the Roman capital divisions. Then add the English capital subdivisions.
To see my work, right click, "View page source" won't get what you want. Right click, "This Frame/View Frame Source" will show you how its done. Don't go there unless you're really stuck.

The real fun in HTML comes when you start combining these elements. Did you notice that the second hint (yes, it's item two in an ordered list) includes an unordered list of options?

Next we'll have headings and horizontal rules.

On to headings