HTML Lists

HTML lists are exactly that: lists of things. There are three kinds of list in HTML: ordered, unordered and description lists.

Ordered Lists

Ordered lists are used when when the order of understanding, rank or execution is important.

For example, if you were writing a manual on how to defuse an atomic bomb, you wouldn’t display instructions as a list of bullet points; a series of enumerated steps would be much more appropriate. (“1. Open the hatch. 2. Cut the blue wire” etc).

Ordered lists are enclosed within an <ol> element. Each item in the list is marked with an <li> (“list-item”) tag:

<p>My top three favourite movies are:</p>
<ol>
    <li>Star Wars</li>
    <li>The Bourne Identity</li>
    <li>Highlander</li>
</ol>

By default the browser will display these items as 1, 2, 3, and so on; re-ordering the list items will change the order that the items appear on the page.

You can change the labels for the list items using the type attribute in the ol element. The type attribute has five possible letter values, each of which has an alternative keyword:

Letter	Keyword	Result
`1`	`decimal`	1, 2, 3
`a`	`lower-alpha`	a, b, c
`A`	`upper-alpha`	A, B, C
`i`	`lower-roman`	i, ii, iii
`I`	`upper-roman`	I, II, III

For example, if I wanted a legal-style list of conditions for a list, I might write the following:

<h2>Terms and Conditions</h2>
<ol type="lower-roman">
    <li><b>Right of refusal</b>. The client shall… </li>
</ol>

It’s also possible to restart and reverse ordered lists using attributes, and to make point-numbered lists (1.1, 1.2, etc) using CSS, among other possibilities.

Unordered Lists

“Unordered” in the context of HTML doesn’t mean that the list items are randomly arranged on the page: it implies that it doesn’t matter which order the viewer reads, executes, or understands the items. A good example is a grocery list: it doesn’t usually matter what order items in the shopping list are picked up.

An unordered list begins with the <ul> tag. Items nested inside this tag are also use <li> around them:

<p>My hobbies include:</p>
<ul>
    <li>Scuba-diving</li>
    <li>Woodworking</li>
    <li>Writing</li>
    <li>Movies</li>
</ul>

Again, changing the list items in your HTML will rearrange the unordered list.

By default, unordered list items are shown as “bullet points”. The display of unordered list items can be customized using CSS.

Historically, unordered lists have been used as a semantic way to organize site navigation:

<ul>
    <li>
        <a href="index.html">Home</a>
    </li>
    <li>
        <a href="products.html">Products</a>
    </li>
</ul>

But today, we have the nav element, which should usually be used in its place.

<nav>
    <a href="index.html">Home</a>
    <a href="products.html">Products</a>
</nav>

Description Lists

Description lists (previously referred to as definition lists in the HTML spec) are often used to define a series of terms. Under-utilized in web development, they are particularly useful whenever you are seeking to make terms very clear, such as a legal document or a handbook. In a previous article I used a definition list to define HTML, but there are many other possibilities.

For example, creating the markup for a book: the title and a picture of the book may be the term, while further details and an explanation of the book’s purpose could be the description.

A minimal description list consists of three tags. <dl> starts the list, with a <dt> defining the term. Finally, the description itself is enclosed inside a <dd> tag. For example:

<dl>
    <dt>Kiwi</dt>
    <dd>A small flightless bird, native to New Zealand.</dd>
</dl>

Most browsers bold the term and indent the definition by default, although this can be entirely customized using CSS.

A definition may be associated with multiple descriptions. These might appear in the form of a nested list:

<dl>
    <dt>Kiwi</dt>
    <dd>
        <ol>
            <li>A small flightless bird, native to New Zealand</li>
            <li>A person from New Zealand</li>
        </ol>
    </dd>
</dl>

Alternatively, you might have multiple dd elements associated with a dt:

<dl>
    <dt>Haunt</dt>
        <dd>To be terrorized by ghosts</dd>
        <dd>A place where an animal goes to feed<dd>
    
    <dt>Hoot</dt>
        <dd>A long, hollow-sounding vocalization</dd>
</dl>

In HTML 5.2, dt’s and their associated dd elements may be grouped together inside a div:

<dl>
    <div>
        <dt>Haunt</dt>
            <dd>To be terrorized by ghosts</dd>
            <dd>A place where an animal goes to feed<dd>
    </div>
    <div>
        <dt>Hoot</dt>
            <dd>A long, hollow-sounding vocalization</dd>
    </div>
</dl>

Nested Lists

Nested lists are not a fourth kind of list; they are just a way to combine list elements. The most important thing to remember is that nested lists go inside li or dd elements, and that those elements close after the new list is complete. For example:

<p>Things to do today:</p>
<ul>
    <li>Teach class
        <ol>
            <li>Web Development</li>
            <li>VR &amp; AR</li>
            <li>3D Animation</li>
        </ol>
    </li>
    <li>Send eMails</li>
</ul>

By default, the browser will indent nested list items. Again, this appearance can be altered with CSS.

Photography by Jayel Aheram, used under a Creatve Commons Attribution 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.