How to create a list

Learn about the 3 different types of lists and how to create them.

What is a list?

A list is a group of related items.

Typically, lists are visually presented vertically, with each item:

However, lists are also used to provide information about the underlying structure of some web content and, while these types of lists are programmatically marked up as lists, they do not necessarily look like typical lists.

Examples of lists that do not look like a list
  • A website’s main navigation menu is commonly marked up as a list of links but visually displayed horizontally across the screen with no list marker before each link.
  • A sidebar with a list of links to different subsections of the page is visually presented as a vertical list, but with no list marker before each link.

How lists help users find information quickly

Lists make content easier to scan. They help:

Lists are also very helpful to screen reader users. Screen reader software will identify all lists on a page and users can use shortcuts to jump from list to list. It might also identify:

Sighted users can determine all of this information through the way that lists are visually presented. However, people who rely on screen reader software can only determine the structure of content in lists if the information is provided programmatically through semantic HTML markup.

Types of lists

In web content, there are 3 main types of list:

Ordered and unordered lists

Whenever possible, use native HTML to create an ordered or unordered list.

Native HTML ordered and unordered lists

To create an ordered list in HTML, use the <ol> element. To create an unordered list, use the <ul> element.

Each list item within the <ol> or <ul> is created using the <li> element.

As a general rule, only <li> elements are allowed within an <ol> or <ul> element. The only exceptions are <script> and <template> elements.

For more on native HTML ordered lists, see:

For more on native HTML unordered lists, see:

Nested lists

Lists can be nested within other lists. That is, a list item within an ordered or unordered list can itself include another ordered or unordered list. See Nesting a list — <ul>: The Unordered List element — MDN Web Docs.

Custom ordered and unordered lists

In almost all cases, it’s recommended to use native HTML list elements.

Sometimes, however, a developer will repurpose other HTML elements to create a list. This requires the use of the ARIA list and listitem roles.

Note: Lists created using ARIA are not explicitly ordered or unordered lists. CSS can be used to address this — see Styling list markers with CSS.

For more information on creating custom ordered and unordered lists, see:

Styling list markers with CSS

You can change the list markers used for ordered and unordered lists using CSS. You can also replace the marker with an image or remove it entirely.

For more details, see:

Description or association lists

A description list, also known as an association or definition list, is a collection of name-value groups.

A name-value group can comprise:

Description lists can be used for any content comprising name-value groups, such as:

Native HTML description lists

Use the <dl> element to identify a list of name-value groups. Within the <dl>, each name-value group is defined by:

As a general rule, only <dt> and <dd> elements are allowed within a <dl> element. However, groups of <dt> and <dd> elements can be wrapped in <div> elements to allow styles or other attributes to be applied to those groups. Otherwise, <script> and <template> are the only other elements that can appear within a <dl>.

For more on native HTML description lists, see:

Custom description lists

Support for custom description or association lists does not currently exist. Explicit ARIA roles for such lists are being defined in version 1.3 of the W3C’s ARIA specification. That specification will not be an official W3C recommendation for some time, although browser support for the roles might always come sooner.

For more, see the associationlist role — WAI-ARIA 1.3 Editor’s Draft — W3C.