Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Semantic Lists | Semantic Content and Structure
Build Meaningful and Accessible Web Pages

bookSemantic 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

index.html

copy

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?

question mark

Which type of list would you use for the following scenario: a recipe's step-by-step instructions?

Select the correct answer

question mark

Which type of list would you use for the following scenario: a glossary of technical terms?

Select the correct answer

question mark

Which type of list would you use for the following scenario: a list of favorite colors?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 3

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

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

bookSemantic 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

index.html

copy

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?

question mark

Which type of list would you use for the following scenario: a recipe's step-by-step instructions?

Select the correct answer

question mark

Which type of list would you use for the following scenario: a glossary of technical terms?

Select the correct answer

question mark

Which type of list would you use for the following scenario: a list of favorite colors?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 3
some-alt