This guide provides useful information on when to use lists, when not to use lists, and how to write lists that are both meaningful and understandable for all users.
We use lists to display lists of information whether they are ordered, unordered or definitions.
dir
elements were used for creating multicolumn directory lists and the menu
element was for single column menu lists but are now deprecated. Use ul
instead.
Unordered lists <ul>
are lists that do not have any order and display with a bullet point such as:
- Ford Prefect
- Austin Healy
- Morris Oxford
- Jowett Jupiter
Unordered lists start with a <ul>
and end with a </ul>
and each list item starts with a <li>
and ends with a </li>
for example:
<ul>
<li>Ford Prefect</li>
<li>Austin Healy</li>
<li>Morris Oxford</li>
<li>Jowett Jupiter</li>
</ul>
<ol>
<li>Sir Terry Pratchett</li>
<li>Douglas Adams</li>
<li>J.R.R Tolkien</li>
<li>Arthur Ransome</li>
<li>Isaac Asimov</li>
<li>Robert E. Howard</li>
<li>Arthur C. Clarke</li>
<li>Michael Moorcock</li>
<li>Sir Arthur Conan Doyle</li>
<li>Agatha Christie</li>
<li>Brian Aldiss</li>
<li>Philip Pullman</li>
</ol>
- Sir Terry Pratchett
- Douglas Adams
- J.R.R Tolkien
- Arthur Ransome
- Isaac Asimov
- Robert E. Howard
- Arthur C. Clarke
- Michael Moorcock
- Sir Arthur Conan Doyle
- Agatha Christie
- Brian Aldiss
- Philip Pullman
The Type attribute
The Type attribute is deprecated and an explanation of using style sheets is shown after this. Type examples are shown as you many come across examples of this in old HTML code
Note: Unless the type of the list number matters such as legal or technical documents where items are referenced by their number or letter, use the CSS list-style-type property instead such as lists with 1., 1.1, and 1.1.1 numbers.
Type | list-style-type | Description |
---|---|---|
type="1" | decimal | List items numbered with numbers (default) |
type="A" | upper-alpha | List items numbered with uppercase letters |
type="a" | lower-alpha | List items numbered with lowercase letters |
type="I" | upper-roman | List items numbered with uppercase roman numbers |
type="i" | lower-roman | List items numbered with lowercase roman numbers |
- Developer Mozilla Ordered List (external website)
- Developer Mozilla List Style Type (external website)
type="1"
<ol type="1">
<li>Sir Terry Pratchett</li>
<li>Douglas Adams</li>
<li>J.R.R Tolkien</li>
<li>Arthur Ransome</li>
<li>Isaac Asimov</li>
<li>Robert E. Howard</li>
<li>Arthur C. Clarke</li>
<li>Michael Moorcock</li>
<li>Sir Arthur Conan Doyle</li>
</ol>
- Sir Terry Pratchett
- Douglas Adams
- J.R.R Tolkien
- Arthur Ransome
- Isaac Asimov
- Robert E. Howard
- Arthur C. Clarke
- Michael Moorcock
- Sir Arthur Conan Doyle
arabic numbers
ol.decimal { list-style-type: decimal }
<ol class="decimal">
<li>Sir Terry Pratchett</li>
<li>Douglas Adams</li>
<li>J.R.R Tolkien</li>
<li>Arthur Ransome</li>
<li>Isaac Asimov</li>
<li>Robert E. Howard</li>
<li>Arthur C. Clarke</li>
<li>Michael Moorcock</li>
<li>Sir Arthur Conan Doyle</li>
<li>Agatha Christie</li>
<li>Brian Aldiss</li>
<li>Philip Pullman</li>
</ol>
- Sir Terry Pratchett
- Douglas Adams
- J.R.R Tolkien
- Arthur Ransome
- Isaac Asimov
- Robert E. Howard
- Arthur C. Clarke
- Michael Moorcock
- Sir Arthur Conan Doyle
- Agatha Christie
- Brian Aldiss
- Philip Pullman
type="A"
<ol type="A">
<li>Sir Terry Pratchett</li>
<li>Douglas Adams</li>
<li>J.R.R Tolkien</li>
<li>Arthur Ransome</li>
<li>Isaac Asimov</li>
<li>Robert E. Howard</li>
<li>Arthur C. Clarke</li>
<li>Michael Moorcock</li>
<li>Sir Arthur Conan Doyle</li>
</ol>
- Sir Terry Pratchett
- Douglas Adams
- J.R.R Tolkien
- Arthur Ransome
- Isaac Asimov
- Robert E. Howard
- Arthur C. Clarke
- Michael Moorcock
- Sir Arthur Conan Doyle
upper-alpha
ol.upper-alpha { list-style-type: upper-alpha }
<ol class="upper-alpha">
<li>Sir Terry Pratchett</li>
<li>Douglas Adams</li>
<li>J.R.R Tolkien</li>
<li>Arthur Ransome</li>
<li>Isaac Asimov</li>
<li>Robert E. Howard</li>
<li>Arthur C. Clarke</li>
<li>Michael Moorcock</li>
<li>Sir Arthur Conan Doyle</li>
</ol>
- Sir Terry Pratchett
- Douglas Adams
- J.R.R Tolkien
- Arthur Ransome
- Isaac Asimov
- Robert E. Howard
- Arthur C. Clarke
- Michael Moorcock
- Sir Arthur Conan Doyle
type="a"
<ol type="a">
<li>Sir Terry Pratchett</li>
<li>Douglas Adams</li>
<li>J.R.R Tolkien</li>
<li>Arthur Ransome</li>
<li>Isaac Asimov</li>
<li>Robert E. Howard</li>
<li>Arthur C. Clarke</li>
<li>Michael Moorcock</li>
<li>Sir Arthur Conan Doyle</li>
</ol>
- Sir Terry Pratchett
- Douglas Adams
- J.R.R Tolkien
- Arthur Ransome
- Isaac Asimov
- Robert E. Howard
- Arthur C. Clarke
- Michael Moorcock
- Sir Arthur Conan Doyle
lower-alpha
ol.lower-alpha { list-style-type: lower-alpha }
<ol class="lower-alpha">
<li>Sir Terry Pratchett</li>
<li>Douglas Adams</li>
<li>J.R.R Tolkien</li>
<li>Arthur Ransome</li>
<li>Isaac Asimov</li>
<li>Robert E. Howard</li>
<li>Arthur C. Clarke</li>
<li>Michael Moorcock</li>
<li>Sir Arthur Conan Doyle</li>
</ol>
- Sir Terry Pratchett
- Douglas Adams
- J.R.R Tolkien
- Arthur Ransome
- Isaac Asimov
- Robert E. Howard
- Arthur C. Clarke
- Michael Moorcock
- Sir Arthur Conan Doyle
type="I"
<ol type="I">
<li>Sir Terry Pratchett</li>
<li>Douglas Adams</li>
<li>J.R.R Tolkien</li>
<li>Arthur Ransome</li>
<li>Isaac Asimov</li>
<li>Robert E. Howard</li>
<li>Arthur C. Clarke</li>
<li>Michael Moorcock</li>
<li>Sir Arthur Conan Doyle</li>
</ol>
- Sir Terry Pratchett
- Douglas Adams
- J.R.R Tolkien
- Arthur Ransome
- Isaac Asimov
- Robert E. Howard
- Arthur C. Clarke
- Michael Moorcock
- Sir Arthur Conan Doyle
upper-roman
ol.upper-roman { list-style-type: upper-roman }
<ol class="upper-roman">
<li>Sir Terry Pratchett</li>
<li>Douglas Adams</li>
<li>J.R.R Tolkien</li>
<li>Arthur Ransome</li>
<li>Isaac Asimov</li>
<li>Robert E. Howard</li>
<li>Arthur C. Clarke</li>
<li>Michael Moorcock</li>
<li>Sir Arthur Conan Doyle</li>
</ol>
- Sir Terry Pratchett
- Douglas Adams
- J.R.R Tolkien
- Arthur Ransome
- Isaac Asimov
- Robert E. Howard
- Arthur C. Clarke
- Michael Moorcock
- Sir Arthur Conan Doyle
type="i"
<ol type="i">
<li>Sir Terry Pratchett</li>
<li>Douglas Adams</li>
<li>J.R.R Tolkien</li>
<li>Arthur Ransome</li>
<li>Isaac Asimov</li>
<li>Robert E. Howard</li>
<li>Arthur C. Clarke</li>
<li>Michael Moorcock</li>
<li>Sir Arthur Conan Doyle</li>
</ol>
- Sir Terry Pratchett
- Douglas Adams
- J.R.R Tolkien
- Arthur Ransome
- Isaac Asimov
- Robert E. Howard
- Arthur C. Clarke
- Michael Moorcock
- Sir Arthur Conan Doyle
lower-roman
ol.lower-roman { list-style-type: lower-roman }
<ol class="lower-roman">
<li>Sir Terry Pratchett</li>
<li>Douglas Adams</li>
<li>J.R.R Tolkien</li>
<li>Arthur Ransome</li>
<li>Isaac Asimov</li>
<li>Robert E. Howard</li>
<li>Arthur C. Clarke</li>
<li>Michael Moorcock</li>
<li>Sir Arthur Conan Doyle</li>
</ol>
- Sir Terry Pratchett
- Douglas Adams
- J.R.R Tolkien
- Arthur Ransome
- Isaac Asimov
- Robert E. Howard
- Arthur C. Clarke
- Michael Moorcock
- Sir Arthur Conan Doyle
Start attribute
Using the start attribute allows you to start the list from a number larger than 1 so start="10" in the code
<ol start="10">
<li>Sir Terry Pratchett</li>
<li>Douglas Adams</li>
<li>J.R.R Tolkien</li>
<li>Arthur Ransome</li>
<li>Isaac Asimov</li>
<li>Robert E. Howard</li>
<li>Arthur C. Clarke</li>
<li>Michael Moorcock</li>
<li>Sir Arthur Conan Doyle</li>
<li>Agatha Christie</li>
<li>Brian Aldiss</li>
<li>Philip Pullman</li>
</ol>
- Sir Terry Pratchett
- Douglas Adams
- J.R.R Tolkien
- Arthur Ransome
- Isaac Asimov
- Robert E. Howard
- Arthur C. Clarke
- Michael Moorcock
- Sir Arthur Conan Doyle
- Agatha Christie
- Brian Aldiss
- Philip Pullman
Within the list item <li>
HTML can be used such as<li><strong>
Ford</strong>
Prefect</li>
Nested lists are lists nested within another list.
<ul>
<li>Fast Escorts
<ul>
<li>Mexico</li>
<li>RS1600</li>
<li>RS1800</li>
<li>RS2000</li>
<li>RS2000 Droop Snoot</li>
</ul>
</li>
<li>Fast Capri’s
<ul>
<li>1600GT</li>
<li>1.6S</li>
<li>2000GT</li>
<li>2.0S</li>
<li>RS2600</li>
<li>2.8i</li>
<li>2.8 Turbo</li>
<li>280</li>
<li>Tickford Turbo</li>
<li>3000GT</li>
<li>3.0S</li>
<li>RS3100</li>
</ul>
</li>
</ul>
- Fast Escorts
- Mexico
- RS1600
- RS1800
- RS2000
- RS2000 Droop Snoot
- Fast Capri’s
- 1600GT
- 1.6S
- 2000GT
- 2.0S
- RS2600
- 2.8i
- 2.8 Turbo
- 280
- Tickford Turbo
- 3000GT
- 3.0S
- RS3100
Description lists are lists which consist of terms and their descriptions such as
<dl>
<dt>Ford Escort RS Mexico</dt>
<dd>Fast Ford</dd>
<dt>Ford Escort Popular</dt>
<dd>Slow Ford</dd>
</dl>
- Ford Escort RS Mexico
- Fast Ford
- Ford Escort Popular
- Slow Ford
The definition of description list tags are outlined below:
<dl>
- description list
<dt>
- term (name)
<dd>
- description of term
The list-style-type CSS property is used to change the style of the bullet points.
list-style-type CSS property
Value | Description |
---|---|
disc | List item marker is set to a bullet (default) |
circle | List item marker is set to a circle |
square | List item marker is set to a square |
none | List items will not be marked |
This is set using the following style="list-style-type:square;"
ul.square {
list-style-type:square;
}
<ul class="square">
<li>Sir Terry Pratchett</li>
<li>Douglas Adams</li>
<li>J.R.R Tolkien</li>
<li>Arthur Ransome</li>
<li>Isaac Asimov</li>
<li>Robert E. Howard</li>
<li>Arthur C. Clarke</li>
<li>Michael Moorcock</li>
<li>Sir Arthur Conan Doyle</li>
</ul>
- Sir Terry Pratchett
- Douglas Adams
- J.R.R Tolkien
- Arthur Ransome
- Isaac Asimov
- Robert E. Howard
- Arthur C. Clarke
- Michael Moorcock
- Sir Arthur Conan Doyle
Using CSS to produce horizontal lists
If we have a unordered list like this
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about/">About</a>
</li>
<li>
<a href="/guides/">Guides</a>
</li>
<li>
<a href="/faqs/">FAQs</a>
</li>
</ul>
We can use CSS styling to produce a navigation menu that looks like this
.main-nav__list {
list-style-type: none;
display: flex;
justify-content: space-evenly;
}
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="/">Home</a>
</li>
<li class="main-nav__item">
<a href="/about/">About</a>
</li>
<li class="main-nav__item">
<a href="/guides/">Guides</a>
</li>
<li class="main-nav__item">
<a href="/faqs/">FAQs</a>
</li>
</ul>
Safari and VoiceOver
VoiceOver users have requested that things that do not look like lists to visual users, do not get read out as a list to screen reader users. This means that if you style a list with list-style: none;
then VoiceOver does not read out "List of X items".
If you wish to force VoiceOver to read out "List of X items" then you will need to add a <ul role="list">
will mean that VoiceOver will read out "List of X items".
This is not a recommendation and there are different views on whether VoiceOver should work this way, and whether VoiceOver should be forced to read a list by adding <ul role="list">
.
- Scott O'Hara on lists and Safari (external link)
- Smashing Magazine - adding roles that duplicate (external link)
Using CSS to produce lists with 1.1.1 numbers
ol {
counter-reset: items;
list-style: none;
}
li {
counter-increment: items;
list-style: none;
}
li::before {
content: counters(items, ".") ". ";
}
<ol class="multilevel">
<li>Ford
<ol>
<li>Escort
<ol>
<li>Mexico</li>
<li>RS1600</li>
</ol>
</li>
<li>Capri</li>
</ol>
</li>
<li>Opel
<ol>
<li>Manta</li>
</ol>
</li>
</ol>
- Ford
- Escort
- Mexico
- RS1600
- Capri
- Escort
- Opel
- Manta
Hopefully this guide has helped you to understand a bit more of using HTML lists for content.
Useful links
- W3C Lists (external link)
- Developer Mozilla Ordered Lists (external link)
- W3Schools HTML Lists (external link)