Semantic Lists

Understanding how to use lists semantically is a key part of writing accessible and meaningful HTML. There are three main types of lists you will use: unordered lists, ordered lists, and description lists. Each serves a different purpose, and choosing the correct one helps both users and assistive technologies interpret your content clearly.

An unordered list is created using the ul element. Use an unordered list when the order of items does not matter, such as a list of ingredients or features. Each item in the list is wrapped in an li element.

An ordered list uses the ol element. Choose an ordered list when the sequence of items is important, such as instructions or a ranking. Like unordered lists, each item is an li. The browser will automatically number the items for you.

A description list is made with the dl element, and is used for pairs of terms and descriptions, such as glossaries or FAQs. Inside a description list, each term is wrapped in a dt (description term) element, and each description in a dd (description definition) element. This structure makes it clear that the relationship between the term and its description is important.