Go to content

HTML5 list types

This page shows examples of lists or elements that can behave like a list.

Unordered list

The ul element is the unordered list. It contains one or more li elements for each list item. The order of the items does not matter.

  • Apple
  • Pear
  • Banana
  • Orange
  • Kiwi

Ordered list

The ol element is an ordered list. It contains one or more li elements for each list item. The order matters.

I went to:

  1. Elementary school
  2. High school
  3. University

Definition list

A dl wraps a definition list. Each term is represented by the dt element and the explanation by one or more dd elements.

First name
Jasha
Last name
Joachimsthal
Programming languages
Java
JavaScript
HTML
CSS

Details / summary

The details element is not really a list but can be used to create an FAQ.

Short description of the contents in the summary.

The details element is a widget with a summary and a more elaborate description which can be expanded or collapsed by the user.

This description can take some space and therefore it is handy that the user can collapse its contents.

Most browsers support the details element