—HTML Series · Post 07: HTML Lists
📦 HTML Lists
Navigation menus, step-by-step instructions, feature lists, glossaries — lists are everywhere on the web. HTML gives you three types, and each one means something different.
Three Types of Lists
HTML has three distinct list types, and — just like everything else in HTML — each one carries semantic meaning. Choosing the right list isn't about appearance. It's about communicating the relationship between your items.
Unordered Lists: <ul>
An unordered list is a collection of items where the order doesn't matter. Grocery lists, feature lists, navigation menus, skill lists on a resume — these are all unordered lists. The browser renders bullet points by default (which CSS can change later).
<h3>Skills</h3>
<ul>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>React</li>
<li>Responsive Design</li>
<li>Git & GitHub</li>
</ul>- HTML & CSS
- JavaScript
- React
- Responsive Design
- Git & GitHub
Two rules to remember: <ul> is the container. <li> is each list item. List items must be direct children of the <ul> — you can't put a loose <p> or <div> directly inside <ul>. Inside each <li>, though, you can put almost anything — paragraphs, links, images, even other lists.
Navigation menus are almost always built with <ul> lists. The <nav> element wraps it, the <ul> creates the list, and each <li> holds a link. CSS transforms the bullets into a horizontal bar, but the underlying HTML is a list — because semantically, that's what a navigation menu is: a list of links.
<!-- Navigation: a list of links -->
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>Ordered Lists: <ol>
An ordered list is a collection of items where sequence matters. Step-by-step instructions, rankings, timelines, recipes — anything where rearranging the items would change the meaning. The browser automatically numbers each item.
<h3>How to Start a Project</h3>
<ol>
<li>Create a new folder for your project</li>
<li>Open it in VS Code</li>
<li>Create an index.html file</li>
<li>Write your HTML structure</li>
<li>Open in browser and start building</li>
</ol>- Create a new folder for your project
- Open it in VS Code
- Create an index.html file
- Write your HTML structure
- Open in browser and start building
The <ol> element accepts a few useful attributes. start="5" changes the starting number (handy if you're splitting a list across sections). reversed counts down instead of up (perfect for countdowns or "top 10" lists that build to #1). And type="A" switches to letters, type="I" switches to Roman numerals. The numbering is automatic — don't hard-code numbers into your <li> text.
Nested Lists
Lists can be nested inside other lists by placing a new <ul> or <ol> inside an <li>. This creates sub-items — like an outline or a multi-level navigation menu.
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>Node.js</li>
<li>Python</li>
</ul>
</li>
</ul>The key rule with nested lists: the nested <ul> or <ol> goes inside the <li>, not after it. The parent <li> isn't closed until after the sub-list. This trips people up constantly. If your nesting looks wrong, check that the inner list is inside the <li>, not between two <li> elements.
Definition Lists: <dl>
The definition list is the most underused list type in HTML, and it's a shame because it's incredibly useful. It pairs terms (<dt>) with their descriptions (<dd>). Think glossaries, FAQ pages, metadata displays, product specs.
<h3>HTML Glossary</h3>
<dl>
<dt>Element</dt>
<dd>The complete unit: opening tag + content + closing tag.</dd>
<dt>Attribute</dt>
<dd>Extra information added to an opening tag, like href or class.</dd>
<dt>Semantic HTML</dt>
<dd>Using elements that describe the meaning of content, not just its appearance.</dd>
</dl>- Element
- The complete unit: opening tag + content + closing tag.
- Attribute
- Extra information added to an opening tag, like href or class.
- Semantic HTML
- Using elements that describe the meaning of content, not just its appearance.
A <dt> can have multiple <dd> elements (a term with multiple definitions), and a <dd> can serve multiple <dt> elements (multiple terms sharing one description). This flexibility makes <dl> perfect for FAQ sections where one question might have multiple answer parts, or for glossaries where synonyms share a definition.
Which List Type Should I Use?
The default bullet and number styles are just browser defaults — CSS can completely change them. You can turn bullets into custom icons, remove them entirely, display list items horizontally, or style them into card layouts. The HTML list type determines meaning. CSS determines appearance. Choose the list type based on what the content is, not what you want it to look like.
I used to build navigation menus with <div> tags. Just a row of <a> links wrapped in a <div>. It looked fine. It worked. And I did it that way for months.
Then I looked at the source code of a site I admired and saw their nav was a <ul> inside a <nav>. I thought it was overkill — why use a list for a menu?
Turns out, screen readers announce "navigation, list, five items" — telling the user exactly what they're dealing with and how many options there are. My <div>-based nav? The screen reader just read through every link with no context, no count, no structure. Functionally usable, but semantically invisible. I refactored every nav I'd ever built that week. It took an hour. It should have been done from the start.
🏆 Mini Build: Recipe Page
Build a recipe page that uses all three list types. Pick any recipe you like (or make one up). Your page should include:
Recap
Unordered lists (<ul>) are for items where order doesn't matter — features, skills, navigation links. Ordered lists (<ol>) are for items where sequence matters — steps, rankings, timelines. Definition lists (<dl>) pair terms with descriptions — glossaries, FAQs, metadata. Lists can be nested inside each other. Navigation menus are built with <ul> inside <nav>. And always choose the list type based on meaning, not appearance — CSS handles how it looks.
