Topic 12 of 41
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
html
<!-- 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
Q:
How do you properly create a nested sub-list?
A:
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.
example
html
<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.