Lists!

Everything in Order.

Introduction

Some content is naturally suited to being presented in a list. Most people like lists too as they are easy to quickly scan and take in the content. In this section we'll learn how to create lists in HTML.

There's a fair bit of reading in this section but you can generally get away with what you'll learn in just the first few bits. You should skim the rest of it though to get an idea of what's possible.

Displaying a List

There are two types of lists in HTML. Ordered lists ( ol ), where each list item ( li ) is preceded by a number. Unordered lists ( ul ), where each item is preceded by a bullet. The syntax for both is quite similar

An ordered list:

<ol>
<li>List item</li>
</ol>

An unordered list:

<ul>
<li>List item</li>
</ul>

As you can see, the only real difference is the main opening and closing tags. Let's see them in practice:

simple_lists.html

  1. <body>
  2. <p>Did you know that Chuck Norris:</p>
  3. <ol>
  4. <li>can cut through a hot knife with butter?</li>
  5. <li>once counted to infinity, <b>twice</b>?</li>
  6. <li>slams revolving doors?</li>
  7. </ol>
  8. <p>Things I would like to do someday:</p>
  9. <ul>
  10. <li>visit the moon</li>
  11. <li>run a marathon, backwards</li>
  12. <li>concoct the ultimate dessert</li>
  13. </ul>
  14. </body>
Simple Lists

Did you know that Chuck Norris:

  1. can cut through a hot knife with butter?
  2. once counted to infinity, twice?
  3. slams revolving doors?

Things I would like to do someday:

  • visit the moon
  • run a marathon, backwards
  • concoct the ultimate dessert

Indenting of code starts getting important now. In the HTML code above you can see we have indented the li items one step as opposed to the ol and ul tags. This makes it easier to see the structure.

Changing the List Type

If we were limited to just decimal numbers and round bullets that would be kinda boring. Fortunately we can change things up a little. We do this using the attribute type.

<ol type="a" >

Here are the possible values for Ordered lists ( ol ):

Type Effect
a Alphanumeric - a. b. c.
A Uppercase Alphanumeric - A. B. C.
i Roman numerals - i. ii. iii.
I Uppercase Roman Numerals - I. II. III.

Here are the possible values for Unordered lists ( ul ):

Type Effect
square
  • Square Bullets
  • disk
  • Disc Bullets
  • circle
  • Circle Bullets
  • And here is an example:

    fancy_lists.html

    1. <body>
    2. <p>Did you know that:</p>
    3. <ol type="A" >
    4. <li>79% of statistics are made up on the spot.</li>
    5. <li>There is a 1% probability that the above statement is true.</li>
    6. <li>There is a 99% probability that one of the above two statements is false.</li>
    7. </ol>
    8. </body>
    Fancy Lists

    Did you know that:

    1. 79% of statistics are made up on the spot.
    2. There is a 1% probability that the above statement is true.
    3. There is a 99% probability that one of the above two statements is false.

    Playing with the Order

    It's also possible to change the starting number for our ordered lists. This can be useful if your lists are broken up into separate sections. To achieve this we use the start attribute.

    <ol start="4" >

    list_starting_point.html

    1. <body>
    2. <p>Let's start at the beginning:</p>
    3. <ol>
    4. <li>ichi</li>
    5. <li>ni</li>
    6. <li>san</li>
    7. </ol>
    8. <p>And now for something completely different:</p>
    9. <ol start="4" >
    10. <li>los</li>
    11. <li>vagh</li>
    12. <li>jav</li>
    13. </ol>
    14. </body>
    List Starting Point

    Let's start at the beginning:

    1. ichi
    2. ni
    3. san

    And now for something completely different:

    1. los
    2. vagh
    3. jav

    Reversing the Order

    Maybe we wish to count down rather than up. We can achieve this with the reversed attribute. This is an attribute which doesn't have a value to go with it.

    <ol reversed >

    reversed_list.html

    1. <body>
    2. <p>Ignition Sequence begin:</p>
    3. <ol reversed>
    4. <li>Release fuel pumps</li>
    5. <li>Induce indium phase change</li>
    6. <li>Blast off!!</li>
    7. </ol>
    8. </body>
    Reversed List

    Ignition Sequence begin:

    1. Release fuel pumps
    2. Induce indium phase change
    3. Blast off!!

    Interrupting the Order

    It's possible to alter the numbering mid list if required. You do this by adding the value attribute to the required list item.

    <li value="9" > </li>

    interrupted_list.html

    1. <body>
    2. <p>How to count to 100 quickly:</p>
    3. <ol>
    4. <li>One</li>
    5. <li>Two</li>
    6. <li>Miss a few</li>
    7. <li value="99" >Ninety Nine</li>
    8. <li>One Hundred</li>
    9. </ol>
    10. </body>
    Interrupted List

    How to count to 100 quickly:

    1. One
    2. Two
    3. Miss a few
    4. Ninety Nine
    5. One Hundred

    As you can see, once you alter the list with a value it will continue from the new value. You may have as many list items with value attributes as you like in your list.

    Nesting Lists

    It is possible to have nested lists. This is when you include another list within a list item. They don't have to be the same type so you could, for instance, have an unordered list within an ordered list.

    There are many places where this is useful. Creating a table of contents is a common situation.

    nested_lists.html

    1. <body>
    2. <p>HTML Tutorial:</p>
    3. <ol>
    4. <li value="7" >Links</li>
    5. <li>Images</li>
    6. <li>Lists
    7. <ol type="i" >
    8. <li>Introduction</li>
    9. <li>Displaying a List</li>
    10. <li>And others...</li>
    11. </ol>
    12. </li>
    13. <li>Tables</li>
    14. </ol>
    15. </body>
    Nested Lists

    HTML Tutorial:

    1. Links
    2. Images
    3. Lists
      1. Introduction
      2. Displaying a List
      3. And others...
    4. Tables

    Definition Lists

    A definition list is used to create a list of pairs of values. It was originally intended to list words and their definitions but may be used for any list of pairs of values.

    <dl>
    <dt>Term>/dt>
    <dd>Definition</dd>
    </dl>

    definition_list.html

    1. <body>
    2. <p>Some definitions:</p>
    3. <dl>
    4. <dt>Internet</dt>
    5. <dd>The reason you are failing your classes.</dd>
    6. <dt>Tomorrow</dt>
    7. <dd>A mystical place where 99% of human productivity and motivation is stored.</dd>
    8. <dt>Octopus</dt>
    9. <dd>A cat with eight legs.</dd>
    10. </dl>
    11. </body>
    Definition List

    Some definitions:

    Internet
    The reason you are failing your classes.
    Tomorrow
    A mystical place where 99% of human productivity and motivation is stored.
    Octopus
    A cat with eight legs.

    Summary

    <ol> <li> </li> </ol>
    Create an Ordered List.
    <ul> <li> </li> </ul>
    Create an Unordered List.
    type="a"
    Change the display type of either an ordered or unordered list.
    start="5"
    Change the starting number for an Ordered list.
    reversed
    Reverse the counting for an Ordered list.
    value="8"
    Interrupt the numbering, mid list, of an Ordered list.
    <dl> <dt> </dt> <dd> </dd> </dl>
    Create an Ordered List.
    Appropriate Content
    For the right content lists are a great way to present it.
    Indenting
    The structure of the code for lists is much easier to read when the code is indented appropriately.

    Activities

    Now let's add some graphical flair to our content.

    • Add a list to your content. Change the opening and closing tags from ol to ul and observe the difference.
    • Add a type attribute to the list. What happens if you add an ordered list type to an unordered list or vice versa?
    • Create a nested list. Leave the code unindented. How easy it is to see the structure. Now indent the code and observe how it is much easier to understand.

    As we work through this tutorial, each section will add new tags allowing you to do more interesting things. My suggestion would be that you pick a topic or subject of interest to you and create a page about that. As you work through each section, add to and improve the page with the new tags you have learnt.