Reviewing the list types

Type 1: Unordered list

The <ul> element represents an unordered list of items, typically rendered as a bulleted list.

<ul>
  <li>Flowers</li>
  <li>Trees</li>
  <li>Birds</li>
  <li>Bees</li>
</ul>

Type 2: Ordered list

The <ol> element represents an ordered list of items. Ordered lists are typically rendered as a numbered list.

<ol>
  <li>Make the bed</li>
  <li>Clean the bathroom</li>
  <li>Wash the dishes</li>
  <li>Hang the washing</li>
</ol>

Type 3: Description list

The <dl> element represents a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements).

<dl>
  <dt>Frog</dt>
    <dd>Wet green thing</dd>
  <dt>Rabbit</dt>
    <dd>Warm fluffy thing</dd>
  <dt>Snake</dt>
    <dd>Cold dry thing</dd>
</dl>

Using role="list"

Lists and list items can also be created using list and listitem roles.

<div role="list">
  <div role="listitem">Item one</div>
  <div role="listitem">Item two</div>
  <div role="listitem">Item three</div>
</div>

A styled unordered list

Note: If you remove the bullets from a list using list-style: none, Safari with VoiceOver may no longer recognise it as a list. It won’t announce that it’s a list or how many items it contains, even though the <ul> and <li> elements are still present. Other browser and screen reader combinations are not affected. If you need to remove the bullets while keeping the list semantics, add role="list" to the <ul> and role="listitem" to each <li>.

<ul>
  <li>Rabbits</li>
  <li>Foxes</li>
  <li>Birds</li>
</ul>

A nested unordered list

<ul>
  <li>Rabbits
    <ul>
      <li>Holland Lop</li>
      <li>European rabbit</li>
      <li>Rex rabbit</li>
      <li>Pygmy rabbit</li>
    </ul>
  </li>
  <li>Foxes</li>
  <li>Birds</li>
</ul>

A fake list

This is a fake list.

<div>1. Flowers</div>
<div>2. Trees</div>
<div>3. Birds</div>
<div>4. Bees</div>

Testing home