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:

• Unordered lists: these are bulleted lists, although you can change the style and appearance of the bullet (just like I've done with this unordered list you're reading now!) This is the type of list that's used for menu structures in larger sites and web applications.
• Ordered Lists: these are sometimes called Numbered Lists, because the list items have numbers instead of bullets.
• Description Lists: these are lists that include a "term" along with one or more actual descriptions or definitions for that term.

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 <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.

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.

This CodePen shows you an example that breaks a list up into two different <ol> elements, usng the start attribute to continue the list numbering:

See the Pen Ordered Lists with Start, Example by Wendi Jollymore (@ProfWendi) on CodePen.

Nested Lists

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

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.

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.)

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.

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.