HTML Lists: Ordered, Unordered & Description Lists

HTML Lists: Ordered, Unordered, and Description Lists

Focus keyword: HTML lists — a foundational concept for structuring content, navigation menus, and FAQs on the modern web.

Lists let you group related items in a way browsers and screen readers understand as a set, improving both readability and semantic HTML structure. There are three types of lists in HTML.

1. Unordered Lists (<ul>)

Used when the order of items doesn't matter — e.g., a list of features or ingredients. Each item is wrapped in <li> and rendered with a bullet by default.

2. Ordered Lists (<ol>)

Used when sequence matters — e.g., step-by-step instructions or rankings. Browsers auto-number items 1, 2, 3... You can customize numbering with the type attribute (1, A, a, I, i) or start counting from a different number with start.

3. Description Lists (<dl>)

Often overlooked, this list type pairs terms with their definitions — ideal for glossaries, FAQs, or metadata display. It uses three tags:

• <dl> — the wrapper
• <dt> — the term
• <dd> — the description

4. Nesting Lists

Lists can be nested inside <li> elements to build multi-level menus — a technique widely used in trending accordion-style navigation and sidebar UI components.

5. Styling Lists with CSS

Use list-style-type to change bullet/number style, or list-style: none combined with Flexbox to build modern horizontal nav bars — a very common pattern in current front-end frameworks.

6. Accessibility Note

Never fake a list using plain <div> or <p> tags with manual bullets/numbers — screen readers rely on real list markup to announce 'list of 5 items', improving web accessibility.