HTML lists for use as content

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>

1. Sir Terry Pratchett
2. Douglas Adams
3. J.R.R Tolkien
4. Arthur Ransome
5. Isaac Asimov
6. Robert E. Howard
7. Arthur C. Clarke
8. Michael Moorcock
9. Sir Arthur Conan Doyle
10. Agatha Christie
11. Brian Aldiss
12. 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.

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

1. Sir Terry Pratchett
2. Douglas Adams
3. J.R.R Tolkien
4. Arthur Ransome
5. Isaac Asimov
6. Robert E. Howard
7. Arthur C. Clarke
8. Michael Moorcock
9. 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>

1. Sir Terry Pratchett
2. Douglas Adams
3. J.R.R Tolkien
4. Arthur Ransome
5. Isaac Asimov
6. Robert E. Howard
7. Arthur C. Clarke
8. Michael Moorcock
9. Sir Arthur Conan Doyle
10. Agatha Christie
11. Brian Aldiss
12. 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>

1. Sir Terry Pratchett
2. Douglas Adams
3. J.R.R Tolkien
4. Arthur Ransome
5. Isaac Asimov
6. Robert E. Howard
7. Arthur C. Clarke
8. Michael Moorcock
9. 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>

1. Sir Terry Pratchett
2. Douglas Adams
3. J.R.R Tolkien
4. Arthur Ransome
5. Isaac Asimov
6. Robert E. Howard
7. Arthur C. Clarke
8. Michael Moorcock
9. 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>

1. Sir Terry Pratchett
2. Douglas Adams
3. J.R.R Tolkien
4. Arthur Ransome
5. Isaac Asimov
6. Robert E. Howard
7. Arthur C. Clarke
8. Michael Moorcock
9. 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>

1. Sir Terry Pratchett
2. Douglas Adams
3. J.R.R Tolkien
4. Arthur Ransome
5. Isaac Asimov
6. Robert E. Howard
7. Arthur C. Clarke
8. Michael Moorcock
9. 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>

1. Sir Terry Pratchett
2. Douglas Adams
3. J.R.R Tolkien
4. Arthur Ransome
5. Isaac Asimov
6. Robert E. Howard
7. Arthur C. Clarke
8. Michael Moorcock
9. 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>

1. Sir Terry Pratchett
2. Douglas Adams
3. J.R.R Tolkien
4. Arthur Ransome
5. Isaac Asimov
6. Robert E. Howard
7. Arthur C. Clarke
8. Michael Moorcock
9. 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>

1. Sir Terry Pratchett
2. Douglas Adams
3. J.R.R Tolkien
4. Arthur Ransome
5. Isaac Asimov
6. Robert E. Howard
7. Arthur C. Clarke
8. Michael Moorcock
9. 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>

1. Sir Terry Pratchett
2. Douglas Adams
3. J.R.R Tolkien
4. Arthur Ransome
5. Isaac Asimov
6. Robert E. Howard
7. Arthur C. Clarke
8. Michael Moorcock
9. 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>

10. Sir Terry Pratchett
11. Douglas Adams
12. J.R.R Tolkien
13. Arthur Ransome
14. Isaac Asimov
15. Robert E. Howard
16. Arthur C. Clarke
17. Michael Moorcock
18. Sir Arthur Conan Doyle
19. Agatha Christie
20. Brian Aldiss
21. 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

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>

1. Ford
   1. Escort
      1. Mexico
      2. RS1600
   2. Capri
2. Opel
   1. 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)