Lesson Overview

Lists are used for many things in web pages and applications: the most obvious being a bulleted or numbered list of items, but we also often use lists for menu and navigation structures.

There are three basic kinds of lists:

We'll look at each of the three types of lists in the sections below, along with how to make nested lists (lists inside other lists).

Unordered Lists

Unordered lists are lists of items that may or may not have bullets. Unordered lists can be used for listing content, but they're also commonly used to create menus.

Unordered lists can be displayed with different types of bullets, but this is done using CSS. There used to be some elemement attributes that we used to use to customize list appearance but these are deprecated and no longer used. Therefore, you should use CSS to do all list appearance customization.

To create an unordered list, you start with the <ul> container element. This is only a container for the list. The actual list items are defined using <li> elements. See the example in this CodePen:

See the Pen Unordered List Example by Wendi Jollymore (@ProfWendi) on CodePen.

Notice how the list and the list items were created:

<ul>
  <li>Unordered Lists</li>
  <li>Ordered Lists</li>
  <li>Description Lists</li>
  </ul>

Each list item's content is enclosed within the <li></li> tags. The collection of list items is enclosed within the <ul> and </ul> tags.

There should be no other content outside of the <li> element inside the <ul> element: this will create invalid HTML. The only element permitted as direct descendants of <ul> is the <li> element. All content inside the <ul> should go inside the <li> elements, or inside the children of the <li> elements.

For example, this is invalid:

<ul>
  <li>Cookies: chocolate chip, peanut butter, cinnamon,
    lemon shortbread, or oatmeal.</li>
  <img src="images/cookies.jpg" alt="a plate of cookies">
  <li>Crackers: whole wheat, rice, almond flour with pumpkin seed.</li>
  <img src="images/crackers.jpg" alt="a plate of crackers">
  <li>Bread: whole wheat, flax, multi-grain, ancient grain, or
    gluten-free.</li>
    <img src="images/breads.jpg" alt="a selection of bread loaves">
</ul>

Instead, the image elements that are children of the &li;ul> element must go inside the <li> elements:

<ul>
    <li>Cookies: chocolate chip, peanut butter, cinnamon,
      lemon shortbread, or oatmeal.
      <img src="images/cookies.jpg" alt="a plate of cookies">
    </li>    
    <li>Crackers: whole wheat, rice, almond flour with pumpkin seed.
      <img src="images/crackers.jpg" alt="a plate of crackers">
    </li>    
    <li>Bread: whole wheat, flax, multi-grain, ancient grain, or
      gluten-free.
      <img src="images/breads.jpg" alt="a selection of bread loaves">
    </li>
  </ul>

Notice that the image elements are now children of the <li> elements. The only children your <ul> should have are the <li> elements.

Creating a menu out of an unordered list is mostly done with CSS. But if you are interested, there's a very basic example in this CodePen.

Exercises

Write the code for an unordered list that contains at least 5 of your favourite foods.

Ordered Lists

Ordered lists are numbered lists of items. You might use an ordered list for listing a series of steps or instructions, the sections of a legal document, a table of contents, or any list of items where the order is important. If you can move list items around without affecting the meaning of the content, you can use the unordered list.

To create an ordered list, you start with the <ol> container element. Just like the unordered list, this is only a container for the list. The actual list items are defined using the same <li> elements you used with unordered lists. See the example in this CodePen:

See the Pen Ordered List Example by Wendi Jollymore (@ProfWendi) on CodePen.

Notice that the structure is exactly like the unordered list, the only difference is that you're using <ol> for the list container instead of <ul>.

There are some attributes you can use to customize your list:

reversed
A boolean attribute that, when used, indicates that the list should be numbered in reverse order.
You can try it with the previous CodePen, if you wish: just add the attribute reversed in the opening <ol> element. You don't need to assign a value.
start
This allows you to set the starting number to a different value.
Useful if you break up a long list over multiple blocks, or you have some other reason for starting at a value other than 1.
The start attribute can only be assigned integer values.
type
This allows you to change the style of numbering.
Can be assigned one of the following values:
  • type="a" for lower-case letters
  • type="A" for upper-case letters
  • type="i" for lower-case Roman Numerals
  • type="I" for upper-case Roman Numerals
  • type="1" (the default value) for integer numbers
If you use CSS instead, there are several more numbering options to choose from, such as symbols and different languages.

You can see (and play with) each of the above attributes in the following CodePen:

See the Pen Ordered Lists: Attributes by Wendi Jollymore (@ProfWendi) on CodePen.

Exercise

  1. Write the code for an ordered list that displays the steps required to create your favourite sandwich.
  2. Write the code to create the list in the image below:
    ordered list, first item numbered as J, last item numbered as F
    Create this ordered list of 5 items numbered from J to F.

    Check your Solution

Nested Lists

It's quite common to display lists inside lists, or to nest lists inside each other. Here are some examples:

A numbered set of instruction steps, one step has its own set of instructions that are listed by ascending letters
Example 1: A numbered list inside a numbered list.
A bulleted of days of the week, and some of the items have a sub-list with bullets for different times of day
Example 2: A bulleted list inside a bulleted list.
a bulleted list of days of the week where each item contains a numbered list of chores; also a numbered list on how to restart your device, each numbered item has a bulleted list of details
Example 3: A numbered list inside a bulleted list, and a bulleted list inside a numbered list.

See the examples on CodePen

Note that you can nest any kind of list inside any other kind of list: you can nest ordered lists and unordered lists; you can nest an ordered list inside an unordered list and vice versa. My examples only show two levels of nesting, but if necessary, you can nest a list inside a nested list (3 or more levels of nesting).

A nested list is really just a list nested inside another list's list item. The inner list is not inside the outer list's container element. Therefore, the key to nesting a list CORRECTLY is to put the list container (e.g. the <ol> or <ul>() inside a list item (or <li> element).

<ol>
  <li>List Item 1</li>
  <li>List Item 2
    <ol type="a">
      <li>List Item a</li>
      <li>List Item b</li>
    </ol>
  </li>
  <li>List Item 3</li>
</ol>
            

Note that in the example, List Item 2 contains the nested list with type="a". So the <ol> for the inner list is actually inside the <li> for List Item 2, it's not inside the outer <ol> element directly. This is the key to nesting lists correctly so that your HTML is valid. If you nest the lists incorrect, your HTML won't successfully validate.

Exercises

  1. Copy the code in this CodePen (or fork the CodePen if you prefer) and fix the code so that the nested list uses correct and valid HTML. Use the HTML Validator's Validate By Input to check your code (you can copy and paste your solution into the input field on the third tab, if you've forked the CodePen).

    Check your Answer

  2. In a new project, create an HTML document that contains the following nested list:
    two multiple choice questions, the questions are numbered and the choices inside are numbered with upper-case letters
    Exercise: Create two multiple choice questions in a set of nested lists.
  3. In the same project as the previous question, add a new HTML page that contains the following outline of the movements of the four violin concertos in Vivaldi's Four Seasons. Don't forget to use character entitites for the sharp and flat symbols!
    each concerto in a bulleted list, each set of 3 movements uses upper-case roman numerals
    Exercise: Vivaldi's Four Seasons as nested lists.

Description Lists

A description list is a simple list of terms accompanies by definitions or descriptions. A typical use-case for a description list would be dictionary definitions. For example, when you look up a word in a dictionarly, the word is accompanied by one or more definitions of the word (in fact, the description list used to be called the "definition" list.)

the word 'turnip' in the online Merriam-Webster dictionary
An example of a word with definitions.

Another possible use is for showing descriptions or quick points of interest about a particular word or phrase. I often use the description list when I show you lists of elements or attributes, such as in the lesson on minimal HTML elements. In this case, I've modified the appearance of the description list using CSS.

part of the list of minimal html elements
An example of where I use a description list

To create a description list requires three different elements:

<dl>
the Description List element
This is the main container for the description list, so all other description list code should go inside the <dl> and </dl> elements.
The only chilren a <dl> should have would be the other description list elements (<dt>, <dd> and the <div> element; an example of the latter can be found in the MDN documentation above), and any necessary text elements in the actual text content of the description list elements.
<dt>
the Description Term element
This element contains the term that you want to define or describe.
Your list can have multiple terms, but each term must be enclosed within its won <dt> element.
<dd>
the Description Details element
This element contains a single defintion or description of the term in the preceeding <dt> element.
You can have multiple <dd> elements for a single term (just like this list does).
One or more <dd> elements can be associated with a set of <dt> elements or terms, as you'll see in one of the examples.

Here are some examples that use definition lists.

See the Pen Description List Examples by Wendi Jollymore (@ProfWendi) on CodePen.

Note that by default, the definition details items are indented. Some browsers might also format the definition term in bold. You can change this formatting with CSS. If you'd like to see how definition lists can be formatted, have a look at the CSS tab of the CodePen.

Exercise

Up above, I used a description list to outline the three elements used in a description list. Copy and paste the text and use it to code the description list. Note that your appearance will be different because mine are formatted with CSS, but that's ok, it doesn't matter. It's only important right now that you can write the proper HTML code. You can check your answer by inspecting my HTML code ;)