HTML Lists: What You Should Know

There are three types of HTML lists which allow developers to semantically group similar items together on a web page. In this article we’ll look at their structure and use cases.

The three types of HTML lists are:

• Description Lists
• Unordered Lists
• Ordered Lists

All list types have a parent tag that defines the list type.

1. Description List

Description lists are used where a specific description is required for the data you wish to present to the user.

The description list is wrapped in <dl> tags.

The first child element is a description term or <dt> set of tags,

and then comes the actual description which is wrapped in <dd> tags.

<dl>
    <dt>My Favourite Books:</dt>
    <dd>The Remains Of The Day</dd>
    <dd>Catch 22</dd>
</dl>

This list format is not used as widely as it should be (probably because the markup is less intuitive than unordered or ordered lists and consists of two inner list elements). A more intuitive (and unofficial) way to remember the tags is: description list, description title, description.

<dl>
    <dt>My Favourite Books: </dt>
    <dd>The Remains Of The Day</dd>
    <dd>Catch 22</dd>
</dl>

dl {
    padding-left: 1rem;
}
dt {
    display: inline-block;
}
dd {
    padding-top: 0.3rem;
}

Note: as shown in the example above, you can have multiple <dd> elements listed under a <dt> element.

2. Unordered Lists

Unordered lists are the most commonly used HTML lists on the web and have no default ordering. The browser will present the list as a series of bullet pointed items. Unordered lists use a parent <ul> element and the child items are <li> elements.

<ul>
      <li>Mice</li>
      <li>Cats</li>
      <li>Dogs</li>
</ul>

To remove the bullet points on unordered lists you must use the CSS property ‘list-style-type: none’.

An example of an unordered list:

<ul>
    <li>Mice</li>
    <li>Cats</li>
    <li>Dogs</li>
</ul>

ul {
    padding-left: 2rem
}

Nesting Unordered Lists

If we want to nest an unordered list, there are two steps:

a) We remove the closing </li> tag of the relevant list item which will hold the nested list, and,

b) place this closing </li> tag below the sub-list.

<ul>
    <li>Mice</li>
    <li>Cats</li>
    <li>Dogs <!-- start of dogs list item -->
        <ul>
            <li>German Shepherd</li>
            <li>Poodle</li>
            <li>Jack Russell</li>
        </ul>
    </li> <!-- end of dogs list item -->
</ul>

Note: nested lists are considered to be their own lists.

3. Ordered Lists

Ordered lists share the same core principle of unordered lists, except the <li> elements are given a hierarchy instead of bullets and are used to show information that needs order.

<ol>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ol>

Ordered lists do come with some related attributes such as start, reversed, type:

Examples of ordered list HTML attributes:

type=”i” Sets the ordering to lowercase Roman numerals (can also be uppercase).
type=”a” Sets the ordering to alphabetical list (can also be uppercase).
start=”6″ Starts the numbering order at number 6.
reversed = reverses the list order.

The default type issued by the browser is type=”1″

The following example would change the standard numbering to lowercase Roman numerals.

<ol type="i">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ol>

Here is an example of a standard ordered list with no amended attribute values:

<ol>
    <li>Put on seatbelt</li>
    <li>Gear in neutral</li>
    <li>Start ignition</li>
</ol>

ol {
    padding-left: 2rem
}

Summary

When deciding on which type of HTML list to use you can follow some simple guidelines:

• If you want to link specific information to a title or term, use a description list.
• If you are showing a list where the order is meaningless, use an unordered list.
• Where you need numerical or hierarchical ordering use an ordered list.