The Basics of Lists

I have noticed that most bloggers use lists of some sort in their articles. Lists tend to give structure to the article, it nakes things look more ordered and of course it generally just makes things easier to read. I have however come upon some strange looking lists and often it is these non-standard lists that are the cause of web pages not validating. I would like to have a quick look at just how lists should be included in our markup.

In HTML there are only 3 types of lists:

  • unordered lists;
  • ordered lists; and
  • definition lists.

Let us have a look at each of these list types.

Unordered Lists

These are also often referred to as bulleted lists. These are the most common form of lists normally used. We should use these if the items in our list can be placed in any order e.g. a list of our friends:

  • Tom.
  • Dick.
  • Harry.

Ordered Lists

These are also known as numbered lists. In an ordered list we place the items in a specific order. Let’s look at a list of student’s test results sorted from highest to lowest.

  1. Dick - 85%
  2. Harry - 79%
  3. Tom - 67%

Definition Lists

Definition lists do just that, they associate specific items and their definitions within the list. Let’s make a list of our household contents.

Kitchen appliances
Kettle
Toaster
Bathroom accessories
Toothbrush
Towels

Nesting

We can of course nest multiple instances of our lists within one another. Let’s make a list of our friends again but include each friends children.

  • Tom
    • Mary
    • Jane
  • Dick
    • Jack
    • Elizabeth
  • Harry
    • Patricia

We can also nest different types of lists within one another.

  • Tom
    1. Mary - 18
      Likes
      Chocalate
      Cats
      Dislikes
      Brussell Sprouts
      Dogs
    2. Jane - 16
  • Dick
    1. Jack - 16
    2. Elizabeth - 14
  • Harry
    1. Patricia - 18

All the types of lists can be styled within our stylesheets but this would be the topic for a different article. Hopefully this has helped a little to get all our pages to validate. If our pages do not validate we cannot even hope to get our pages as accessible to as many as possible. Happy listing!

These posts might be related:

  1. W3C Accessibility Guidelines - Priority 2 Checkpoints
  2. Help yourself as well as others
  3. Getting to the Crux of the Matter

13 Comments to “The Basics of Lists”