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.
index.html
1. Which type of list would you use for the following scenario: a recipe's step-by-step instructions?
2. Which type of list would you use for the following scenario: a glossary of technical terms?
3. Which type of list would you use for the following scenario: a list of favorite colors?
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Can you give examples of each type of list in HTML?
When should I use a description list instead of an unordered or ordered list?
Are there accessibility tips for using lists in HTML?
Awesome!
Completion rate improved to 8.33
Semantic Lists
Swipe to show menu
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.
index.html
1. Which type of list would you use for the following scenario: a recipe's step-by-step instructions?
2. Which type of list would you use for the following scenario: a glossary of technical terms?
3. Which type of list would you use for the following scenario: a list of favorite colors?
Thanks for your feedback!