Lists Bring Order To Web Pages: Here’s The HTML Code To Create Them
Lists are used all the time on the web. Articles, website navigation menus, and product features on e-commerce websites all make frequent use of lists – even when you can’t tell that a list is being used just by looking at the web page.
There are three types of lists you can use, and this quick guide will show you how to use each.
Contents
Unordered Lists
An unordered list is a list in which the order of the list items does not matter. Unordered lists should be used when rearranging the order of the list items would not create confusion or change the meaning of the information on the list.
The ul
element opens and closes an unordered list. The items on the list are contained between list item, li
, tags. A simple unordered list containing three items could be created with the following HTML.
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
Unless CSS rules are created to change the appearance of the list, the default presentation of an unordered list is to add a disc-style bullet point on the left-hand side of each list item and to indent the entire list.
Here’s how our short unordered list renders in a browser:
- Item A
- Item B
- Item C
Ordered Lists
Ordered lists are used for lists of items for which the order of the items does matter. The syntax for an ordered list is exactly the same as for an unordered list. However, to create an ordered list, the ol
tag is used rather than the ul
tag. By making this one change, we can convert the unordered list in our previous example into an ordered list.
We’re also going to change the text of the list items to make it clear that these are items that need to appear in a specific sequential order.
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>
As you can see below, rather than a bulleted list, we now have a numbered list.
- Step 1
- Step 2
- Step 3
Changing Numbering
There are times when you want to control the numbering of ordered lists. For example, your list may be broken up by a paragraph that appears mid-list to expand on a certain concept, or you may create a countdown list that begins at a high number and counts down. Lastly, maybe you’d rather use roman numerals. HTML and CSS make it easy to control the numbering of ordered lists.
Creating a Countdown List
To reverse the number of a list, simply add the reversed
attributed to the opening ol
tag.
<ol reversed>
<li>Item 3</li>
<li>Item 2</li>
<li>Item 1</li>
</ol>
When rendered in most browsers the numbering of this list will appear reversed.
- Item 3
- Item 2
- Item 1
Note that Microsoft browsers do not support the reversed
attribute. If you use this attribute, bear in mind that visitors using Internet Explorer or Edge will see standard numbering.
Starting a List on a Specific Number
The start
attribute is used to specify the number on which an ordered list starts. For example, imagine you have a list of 5 items, and after the second and fourth items you want to add a sentence or two with additional details. You could use the following HTML to do this without restarting the list numbering after each paragraph.
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
<p>A few short sentences about Item 2 that we don't want to appear appended to the list item. A second sentence of additional details</p>
<ol start="3">
<li>Step 3</li>
<li>Step 4</li>
</ol>
<p>Notice that we used the <code>start</code> attribute on the <code>ol</code> tag to restart the numbering at "3" following the break in the list above. We'll use the same technique to properly number Step 5 below.</p>
<ol start="5">
<li>Step 5</li>
</ol>
Here’s how that list renders in the browser:
- Step 1
- Step 2
A few short sentences about Item 2 that we don’t want to appear appended to the list item. A second sentence of additional details
- Step 3
- Step 4
Notice that we used the start
attribute on the ol
tag to restart the numbering at “3” following the break in the list above. We’ll use the same technique to properly number Step 5 below.
- Step 5
Changing the Numbering Style
You can use CSS to change the marker style of an ordered list. In addition to standard numbering (referred to as decimal
in CSS), you can also use:
upper-roman
for uppercaseroman numeralslower-roman
for lowercase roman numeralsdecimal-leading-zero
to add a “0” placeholder before single-digit list items
We cover the list-style-type
CSS property used to implement these numbering styles below.
Description Lists
Description lists are created with the dl
tag. Used far less frequently than their ordered and unordered peers, description lists are used to contain name-value groups. Each name-value group consists of one name, or term, placed between dt
tags, followed by one or more values with each value, or description, placed between dd
tags.
For example, if we wanted to use a description list to explain the relationship between members of a family, we might use the following code:
<dl>
<dt>Parents</dt>
<dd>Jamie</dd>
<dd>Charlie</dd>
<dt>Children</dt>
<dd>Landry</dd>
<dd>Oakley</dd>
<dd>Skyler</dd>
<dt>Pets</dt>
<dd>Cat</dd>
<dd>Dog</dd>
<dd>Gerbil</dd>
</dl>
When that list is rendered, it will be displayed in such a way that the relationships between the terms (dt
) and values (dd
) are clear.
- Parents
- Jamie
- Charlie
- Children
- Landry
- Oakley
- Skyler
- Pets
- Cat
- Dog
- Gerbil
Nested Lists
A nested list is a list within a list. If you’ve ever created a bulleted outline in a word processing document you probably used a variety of indentations and bullet point types to denote items that were subpoints of another item in the outline. This is the effect we’re going for when we create nested lists.
To create a nested list, simply add a new list within a parent list like this:
<ul>
<li>Item A</li>
<li>Item B
<ul>
<li>Subitem B.1</li>
<li>Subitem B.2</li>
</ul></li>
<li>Item C</li>
</ul>
When that list is loaded in the browser, the nested list will be indented further than the parent list, and a different type of item marker will be displayed.
- Item A
- Item B
- Subitem B.1
- Subitem B.2
- Item C
Nested lists aren’t just used to organize the visual representation of information. Screen readers and other assistive technologies rely on the nested structure of complex lists to make sense of the hierarchy and logic of data within the list.
You could use assign classes to list items and use CSS to create the same visual effect as a nested list. However, if you did that, the hierarchical and logical structure of the list would be lost to website visitors using assistive technologies. In other words, don’t use CSS to create nested lists visually, use HTML to create them.
Using Lists for Menus
One of the most common uses of lists is to create website navigation menus. Unordered lists are usually the list-of-choice for this purpose. With just a few lines of CSS we can convert an unordered list into an attractive horizontal navigation menu.
<style>
#nav {
background: lightgray;
overflow: auto;
}
#nav li {
float: left;
list-style-type: none;
padding: 10px;
}
</style>
<ul id="nav">
<li><a href="#Using_Lists_for_Menus">Home</a></li>
<li><a href="#Using_Lists_for_Menus">About Us</a></li>
<li><a href="#Using_Lists_for_Menus">Contact Us</a></li>
</ul>
If we load that code in the browser, you’ll notice that each menu item changes when you hover over it.
A lot more can be done with lists, CSS, and JavaScript to create interactive drop-down menus, and our menu tutorial will teach you how to create beautiful, modern, interactive, and well-organized menus.
Styling Lists
List typography is usually best styled to match the typography of the website’s paragraph text. List-specific styling can be accomplished with CSS.
There are three list properties that can be styled with CSS:
list-style-type
: Defines the marker type that preceeds each list item. Common values includedisc
(the default unordered list style type),decimal
(the default ordered list style type), circle, square, lower- or upper-roman, and lower- or upper-latin, although several additional styles may also be used.list-style-position
: Determines whether the list item marker should be placedinside
the content box, oroutside
of the content box in the item’s left-hand padding area.list-style-image
: An image can also be used as the item marker. This property is used to specify the image file to be used.
Each of these three properties can be applied seperately by using the individual property names or simultaneously with the list-style
shorthand property. The list-style
property syntax includes the list style type, position, and image values in that order. For example, if we wanted to select the square marker, position it inside the content box, and also specify an image file, our CSS would look something like this:
selector_for_the_target_list {
list-style: square inside url("box_image.png");
}
Since we’ve specified both a list marker and an image, the image will be used unless it is unavailable, in which case the square marker will be displayed.
Closing Thoughts
Lists are one of the most diverse and effective tools in a web designers toolbox. They provide logical, hierarchical structure to data, and can be used in a variety of ways. Understanding the full breadth of what is possible with lists in HTML makes this powerful HTML element even more useful.