Lists

Unordered Lists

There are several types of list, an un-ordered list can be created by the following markup:

Displayed by browserHTML markup required
  • Item one of list
  • Item two of list 
<ul>
    <li>Item one of list </li>
    <li>Item two of list </li>
</ul>

Nested lists can be done as follows. Note that mark nested lists up correctly you need to understand that any nested list is actually a child of a list item.

Displayed by browserHTML markup required
  • Item one of list
  • Item two of list
    • Subitem one of item two
    • Subitem two of item two
  • Item three of list 
<ul>
    <li>Item one of list </li>
    <li>Item two of list 
	<!-- Closing </li> tag not placed here! -->
    <ul>
        <li>Subitem one of item two </li>
        <li>Subitem two of item two </li>
    </ul>
    </li>   <!-- Closing </li> for item two here -->
    <li>Item three of list </li>
</ul>

It is also possible to specify the appearance of unordered lists:

Displayed by browserHTML markup required
  • Item one of list
  • Item two of list 
<ul>
    <li>Item one of list </li>
    <li>Item two of list </li>
</ul>
  • Item one of list
  • Item two of list 
ul { 
 list-style-type: circle;
}
<ul>
    <li>Item one of list </li>
    <li>Item two of list </li>
</ul>
  • Item one of list
  • Item two of list 
ul { 
 list-style-type: square;
}
<ul>
    <li>Item one of list </li>
    <li>Item two of list </li>
</ul>
  • Item one of list
  • Item two of list
  • Item three
  • Item four 
ul.a {list-style-type: disc;}
ul.b {list-style-type: circle;}
ul.c {list-style-type: square;}
ul.d {list-style-type: none; }

<ul>
    <li class="a">Item one of list </li>
    <li class="b">Item two of list </li>
    <li class="c">Item three </li>
    <li class="d">Item four </li>
</ul>

Ordered Lists

An ordered list is similar to an un-ordered list, except that each entry is consecutively numbered.

Displayed by browserHTML markup required
  1. Item one of list
  2. Item two of list 
<ol>
    <li>Item one of list </li>
    <li>Item two of list </li>
</ol>

Nested lists can be done as follows:

Displayed by browserHTML markup required
  1. Item one of list
  2. Item two of list
    1. Subitem one of item two
    2. Subitem two of item two
  3. Item three of list 
<ol>
    <li>Item one of list </li>
    <li>Item two of list 
    <ol>
        <li>Subitem one of item two </li>
        <li>Subitem two of item two </li>
    </ol>
    </li> 
    <li>Item three of list </li>
</ol>

It is also possible to specify the appearance of unordered lists:

Displayed by browserHTML markup required
  1. Item one of list
  2. Item two of list
  3. Item three of list 
<ol>
    <li>Item one of list </li>
    <li>Item two of list </li>
    <li>Item three of list </li>
</ol>
  1. Item one of list
  2. Item two of list
  3. Item three of list 
ol {
   list-style-type: upper-alpha;
}
<ol>
    <li>Item one of list </li>
    <li>Item two of list </li>
    <li>Item three of list </li>
</ol>
  1. Item one of list
  2. Item two of list
  3. Item three of list 
ol {
   list-style-type: lower-alpha;
}
<ol>
    <li>Item one of list </li>
    <li>Item two of list </li>
    <li>Item three of list </li>
</ol>
  1. Item one of list
  2. Item two of list
  3. Item three of list 
ol {
   list-style-type: upper-roman;
}
<ol>
    <li>Item one of list </li>
    <li>Item two of list </li>
    <li>Item three of list </li>
</ol>
  1. Item one of list
  2. Item two of list
  3. Item three of list 
ol {
   list-style-type: lower-roman;
}
<ol>
    <li>Item one of list </li>
    <li>Item two of list </li>
    <li>Item three of list </li>
</ol>

It is possible to give a start value to the ordered list or to reset the counter:

Displayed by browserHTML markup required
  1. Item one of list
  2. Item two of list
  3. Item three of list
  4. Item four of list 
<ol start="3">
    <li>Item one of list </li>
    <li>Item two of list </li>
    <li>Item three of list </li>
    <li>Item four of list </li>
</ol>
  1. Item one of list
  2. Item two of list
  3. Item three of list
  4. Item four of list 
<ol>
    <li>Item one of list </li>
    <li>Item two of list </li>
    <li value="1">Item three of list </li>
    <li>Item four of list </li>
</ol>

It is possible to reverse an ordered list and display it in descending order:

Displayed by browserHTML markup required
  1. Item four of list
  2. Item three of list
  3. Item two of list
  4. Item one of list 
<ol reversed>
      <li>Item four of list </li>
      <li>Item three of list </li>
      <li>Item two of list </li>
      <li>Item one of list </li>
  </ol>

The <ul> or <ol> can now be enclosed within <nav> elements for better semantic structure when used as navigational menus. For example:

Displayed by browser
HTML markup required 
<style> 
    .nav-bar {
      list-style-type: none; /* Removes bullet points */
      margin: 0; /* No extra space around the navbar */
      padding: 0; /* No extra space around the navbar */
      background-color: #333; /* navbar background colour */
    }

    /* Style each list item */
    .nav-bar li {
      display: inline-block; /* Align items horizontally */
      margin: 0;
      }

    /* Style the links */
    .nav-bar li a {  /* <a> tag looks like button */
      display: block; /* Make the clickable area a block */
      color: white; /* Link text color */
      text-decoration: none; /* Remove underline */
      padding: 14px 20px; /* Padding around the link */
      background-color: #333; /* Match navbar background */
      text-align: center;
      }

    /* Add hover effects */
    .nav-bar li a:hover {
      background-color: #575757; /* Hover bg color */
      color: #fff; /* Text color on hover */
      }

    /* Optional: Make the navigation bar full-width */
    .nav-bar {
      justify-content: space-around; /* Evenly space items */
    }
</style>

<nav class="nav-bar" > 
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

Description Lists

A description list is used to display name/value pairs such as terms and their definitions.

Displayed by browserHTML markup required
Definition tag.
Text of the definition list. Which may stretch over several lines.
Another definition tag.
Text of the definition list.
<dl>
    <dt>Definition tag.</dt>
        <dd>Text of the definition list. Which may 
        stretch over several lines.</dd>
    <dt>Another definition tag.</dt>
        <dd>Text of the definition list.</dd>
</dl>

and the same example without any styling: JS Bin on jsbin.com

Enhanced Semantics:

HTML5 allows for greater flexibility and semantic use of description lists. You can wrap groups of <dt> and <dd> elements within a <div> or <section> for better grouping.

Lists with image bullets

It is possible to use your own graphics as bullets in an unordered list:

Displayed by browserHTML markup required
  • Item 1
  • Item 2
  • Item 3
  • Item 4 
ul {
  list-style-image: url('claretball.gif');
}
<ul>
     <li> Item 1 </li>
     <li> Item 2 </li>
     <li> Item 3 </li>
     <li> Item 4 </li>
</ul>

ARIA for HTML5 Lists

Accessible Rich Internet Applications (ARIA) roles and properties are used to enhance accessibility for screen readers and assistive technologies. When working with lists in HTML5, ARIA attributes can be applied to improve semantic meaning and ensure accessibility for users with disabilities.
Here is a breakdown of how ARIA can be used with HTML5 lists:

The table below provides some examples for creating lists using <div> or <span> integrating ARIA for accessibility.

Displayed by browserHTML markup required
Item 1
Item 2
Item 3
 
<div role="list">

    <div role="listitem">Item 1</div>

    <div role="listitem">Item 2</div>

    <div role="listitem">Item 3</div>

  </div>
Item A Item B Item C 
<div role="list">

    <span role="listitem">Item A</span>

    <span role="listitem">Item B</span>

    <span role="listitem">Item C</span>

  </div>

Features of Our Product

  • Feature 1
  • Feature 2
  • Feature 3
 
<p id="list-label">Features of Our Product</p>

  <ul role="list" aria-labelledby="list-label">

    <li>Feature 1</li>

    <li>Feature 2</li>

    <li>Feature 3</li>

   </ul>
 
<ul role="list" aria-hidden="true">

    <li>Hidden Item 1</li>

    <li>Hidden Item 2</li>

  </ul>