HTML lists for use as content

By: Steve Wilkinson
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:

Site preferences

Please feel free to display our site, your way by finding the preferences that work best for you. We do not track any data or preferences at all, should you select any options in the groups below, we store a small non-identifiable token to your browser's Local Storage, this is required for your preferencesto persist across pages accordion be present on repeat visits. You can remove those tokens if you wish, by simply selecting Unset, from each preference group.

Theming

Theme
Code block theme

Code theme help

Code block themes can be changed independent of the site theme.

  • Default: (Unset) Code blocks will have the same theme as the site theme.
  • Light 1: will be default for users viewing the light theme, this maintains the minimum 7:1 (WCAG Level AAA) contrast ratio we have used throughout the site, it can be quite difficult to identify the differences in colour between various syntax types, due to the similarities in colour at that contrast ratio
  • Light 2: drops the contrast for syntax highlighting down to WCAG Level AA standards (greater than 4.5:1)
  • Dark: Syntax highlighting has a minimum contrast of 7:1 and due to the dark background differences in colour may appear much more perceivable

Motion

Motion & animation

Motion & animation help

  • Default (Unset): Obeys device settings, if present. If no preference is set, there are subtle animations on this site which will be shown. If you have opted for reduce motion, smooth scrolling as well as expanding and collapsing animations will no longer be present, fading transtitions and micro animations will still be still present.
  • None: All animations and transitions are completely removed, including fade transitions.

Links

Underline all links

Underline all links help

  • Default (Unset): Most links are underlined, with a few exceptions such as: the top level links in the main navigation (on large screens), cards, tags and icon links.
  • Yes: Will add underlines to the exceptions outlined above, resulting in every link being underlined

Text and paragraphs

Font size (main content)

Font size help

This setting does not apply to the site's header or footer regions

  • Default (Unset): Font sizes are set to site defaults
  • Selecting Large or Largest will increase the font size of the main content, the size of the increase depends on various factors such as your display size and/or zoom level. The easiest way to determine which option suits you best would be to view this text after clicking either size's button
Letter spacing

Letter spacing help

  • Default (Unset): Default letter spacing applies
  • Increased: Multiplies the font size by 0.12 and adds the sum as spacing between each character
Line height

Line height help

  • Default (Unset): all text has a minimum line height of 1.5 times the size of the text
  • Increased: all text has a line height of twice the size of the text
Line width

Line width help

  • Default (Unset): all text has a maximum line width of 80 REM units (this averages around 110 characters per line)
  • Decreased: all text has a maximum line width of 55 CH units (this averages around 80 characters per line)
Paragraph spacing

Paragraph spacing help

  • Default (Unset): The space between paragraphs is equivalent to 1.5 times the height of the paragraph's text
  • Increased: The space between paragraphs is equivalent to 2.25 times the height of the paragraph's text
Word spacing preference

Word spacing help

  • Default (Unset): No modifications to word spacing are present
  • Increased: Spaces between words are equivalent to 0.16 times the font size