HTML lists for use as content

Posted:
Tagged with:

Introduction to content lists

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.

What are lists for

We use lists to display lists of information whether they are ordered, unordered or definitions.

DIR and MENU should not be used

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

Unordered lists <ul> are lists that do not have any order and display with a bullet point such as:

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>

Ordered Lists

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

The Type attribute is used to define the style of the ordering
Typelist-style-typeDescription
type="1"decimalList items numbered with numbers (default)
type="A"upper-alphaList items numbered with uppercase letters
type="a"lower-alphaList items numbered with lowercase letters
type="I"upper-romanList items numbered with uppercase roman numbers
type="i"lower-romanList items numbered with lowercase roman numbers

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

List items

Within the list item <li> HTML can be used such as<li><strong>Ford</strong> Prefect</li>

Nested Lists

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>

Description Lists

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

Styling Lists

The list-style-type CSS property is used to change the style of the bullet points.

list-style-type CSS property

list-style-type
ValueDescription
discList item marker is set to a bullet (default)
circleList item marker is set to a circle
squareList item marker is set to a square
noneList 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>

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>

Unordered list without css to style the list into a menu

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>

Unordered list styles with CSS to appear as a menu

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">.

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

Wrapping up

Hopefully this guide has helped you to understand a bit more of using HTML lists for content.

Useful links

Share on:

Opens in new tab Opens in new tab