HTML Lists
Overview
Lists group related pieces of information together. Beyond rendering bullet points or numbers, lists are critical for structuring Navigation Menus, Breadcrumbs, and product grids. Grouping items in a list gives screen readers the ability to announce 'List with 5 items', providing disabled users vital context about the length and structure of the data they are about to read.
Syntax
<!-- Unordered List (Bullet points - Order does NOT matter) -->
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
<!-- Ordered List (Numbered - Order DOES matter) -->
<!-- Uses the 'type' attribute to change from numbers to letters/roman numerals -->
<ol type="A">
<li>Pre-heat the oven</li>
<li>Mix the ingredients</li>
<li>Bake for 30 minutes</li>
</ol>
<!-- Description List (Key-Value pairs, like a dictionary) -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>Common Pitfalls
Nesting an
<ul>directly inside another<ul>(e.g.,<ul> <ul><li>Item</li></ul> </ul>). This is invalid HTML. Nested lists MUST be placed completely inside a parent<li>tag.Using
<ol>when the order doesn't actually matter, just because you like the visual look of numbers. Always use CSS to style list markers; use HTML tags purely for their structural meaning.
Interview Questions
How do you properly create a nested sub-list?
The child <ul> or <ol> must be placed completely inside the <li> element of the parent list, not as a direct sibling of the <li>.
Real-World Example
Building a semantically perfect, accessible navigation bar.
<nav aria-label="Main Navigation">
<!-- Navigation bars are structurally just unordered lists of links! -->
<ul style="display: flex; gap: 20px; list-style: none;">
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>Check Your Knowledge
Test your understanding of HTML Lists with these quick questions.