Lists are everywhere on websites:
HTML provides three main list structures:
<ul> → Unordered list
<ol> → Ordered list
<dl> → Description listThe important principle is:
Use the list element that represents the meaning of your content.
<ul>#Use <ul> when the order of items doesn't matter.
Example:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Browser output:
• HTML
• CSS
• JavaScriptThe browser usually displays bullet points by default.
<li> — List Item#<li> represents an individual item in a list.
Example:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Structure:
<ul>
│
├── <li>
├── <li>
└── <li>A <li> should normally be a child of:
<ul><ol><menu><ol>#Use <ol> when the order matters.
Example:
<ol>
<li>Open VS Code</li>
<li>Create an HTML file</li>
<li>Write your HTML</li>
<li>Open it in the browser</li>
</ol>Output:
1. Open VS Code
2. Create an HTML file
3. Write your HTML
4. Open it in the browserHere, changing the order changes the meaning.
<ul> vs <ol>#This is one of the most important distinctions.
<ul>
<li>React</li>
<li>Vue</li>
<li>Angular</li>
</ul>The order isn't inherently important.
<ol>
<li>Install Node.js</li>
<li>Create project</li>
<li>Run application</li>
</ol>The sequence matters.
Think:
Does order matter?
│
┌───┴───┐
│ │
No Yes
│ │
<ul> <ol>Lists can contain other lists.
Example:
<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>Conceptually:
• Frontend
• HTML
• CSS
• JavaScript
• Backend
• Node.js
• PythonIf you want a nested list to belong to a particular list item, put it inside the <li>.
Correct:
<ul>
<li>
Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>Not:
<ul>
<li>Frontend</li>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</ul>The second structure doesn't correctly express that the nested list belongs to "Frontend."
You can create several levels.
<ul>
<li>
Web Development
<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>
</li>
</ul>Structure:
• Web Development
• Frontend
• HTML
• CSS
• JavaScript
• Backend
• Node.js
• Python<ol> supports attributes that control numbering.
start#Example:
<ol start="5">
<li>Fifth item</li>
<li>Sixth item</li>
<li>Seventh item</li>
</ol>Output:
5. Fifth item
6. Sixth item
7. Seventh itemreversed#You can reverse numbering:
<ol reversed>
<li>Third</li>
<li>Second</li>
<li>First</li>
</ol>Output:
3. Third
2. Second
1. FirstThis is useful when the numbering itself needs to count down.
type#<ol> can specify different numbering systems.
For example:
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>Output:
A. HTML
B. CSS
C. JavaScriptOther values include:
1 → 1, 2, 3
A → A, B, C
a → a, b, c
I → I, II, III
i → i, ii, iiiExample:
<ol type="I">
<li>Introduction</li>
<li>Basics</li>
<li>Advanced</li>
</ol><ol> for Visual Numbering#You generally shouldn't use <ol> just because you want numbers visually.
If the content isn't actually an ordered list, CSS may be more appropriate.
Remember:
HTML → Meaning
CSS → Presentation<dl>#The third major list type is the description list.
Use it for groups of terms and descriptions.
Example:
<dl>
<dt>HTML</dt>
<dd>Structures web content.</dd>
<dt>CSS</dt>
<dd>Styles web content.</dd>
<dt>JavaScript</dt>
<dd>Adds behavior and interactivity.</dd>
</dl>Conceptually:
HTML
Structures web content.
CSS
Styles web content.
JavaScript
Adds behavior and interactivity.<dt> — Description Term#<dt> represents a term.
Example:
<dt>HTML</dt><dd> — Description#<dd> provides the corresponding description.
Example:
<dd>
HyperText Markup Language.
</dd>Structure:
<dl>
│
├── <dt>HTML</dt>
│ └── <dd>...</dd>
│
├── <dt>CSS</dt>
│ └── <dd>...</dd>
│
└── <dt>JavaScript</dt>
└── <dd>...</dd>A term can have multiple descriptions.
<dl>
<dt>HTML</dt>
<dd>
HyperText Markup Language.
</dd>
<dd>
Used to structure web content.
</dd>
</dl>This can be useful when a term has several related pieces of information.
Multiple terms can also share a description.
<dl>
<dt>HTML</dt>
<dt>HyperText Markup Language</dt>
<dd>
The standard markup language for web documents.
</dd>
</dl>This expresses that both terms refer to the same description.
A product specification can sometimes be represented as:
<dl>
<dt>Processor</dt>
<dd>Intel Core i9</dd>
<dt>RAM</dt>
<dd>32 GB</dd>
<dt>Storage</dt>
<dd>2 TB SSD</dd>
<dt>Operating System</dt>
<dd>Windows 11</dd>
</dl>This communicates:
Processor
Intel Core i9
RAM
32 GB
Storage
2 TB SSDFor genuinely tabular data involving multiple comparable rows/columns, however, a <table> may be more appropriate. We'll cover that in the next chapter.
Navigation is one of the most common real-world uses of lists.
Example:
<nav aria-label="Main navigation">
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/projects">Projects</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</nav>Why use a list?
Because navigation is conceptually a group of links.
CSS can later remove the default bullets and make it horizontal.
<ul>#Important nuance:
A <nav> element does not require a list.
This is valid:
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>And this is also valid:
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>The choice depends on the structure and design of your content.
Product features:
<h2>Features</h2>
<ul>
<li>32 GB RAM</li>
<li>2 TB SSD</li>
<li>14-inch display</li>
<li>All-day battery</li>
</ul>Because the order isn't important, <ul> is appropriate.
For instructions:
<h2>How to Install</h2>
<ol>
<li>Download the application.</li>
<li>Run the installer.</li>
<li>Accept the license agreement.</li>
<li>Click Install.</li>
<li>Launch the application.</li>
</ol><ol> communicates that these are sequential steps.
A recipe is a great example of both list types.
Order doesn't matter:
<h2>Ingredients</h2>
<ul>
<li>2 eggs</li>
<li>1 cup flour</li>
<li>1 cup milk</li>
<li>1 tablespoon sugar</li>
</ul>Order matters:
<h2>Instructions</h2>
<ol>
<li>Mix the ingredients.</li>
<li>Heat the pan.</li>
<li>Pour the mixture.</li>
<li>Cook for two minutes.</li>
<li>Serve.</li>
</ol>This is exactly the type of semantic distinction HTML is designed to express.
Lists can also be used to represent groups of FAQ questions, but for an actual FAQ interface, other semantic structures may be appropriate depending on the interaction.
A simple list:
<ul>
<li>
What is HTML?
</li>
<li>
What is CSS?
</li>
<li>
What is JavaScript?
</li>
</ul>For an expandable FAQ, you'll later learn:
<details>
<summary>What is HTML?</summary>
<p>
HTML is the standard markup language for web documents.
</p>
</details>A realistic technology roadmap:
<ul>
<li>
Frontend
<ul>
<li>
HTML
<ul>
<li>Elements</li>
<li>Attributes</li>
<li>Forms</li>
</ul>
</li>
<li>
CSS
<ul>
<li>Selectors</li>
<li>Flexbox</li>
<li>Grid</li>
</ul>
</li>
</ul>
</li>
</ul>Structure:
• Frontend
│
├── HTML
│ ├── Elements
│ ├── Attributes
│ └── Forms
│
└── CSS
├── Selectors
├── Flexbox
└── GridHTML defines the structure.
CSS controls the appearance.
For example:
ul {
list-style-type: square;
}You can change:
Example:
nav ul {
list-style: none;
}This removes the default list markers.
We'll learn the CSS side later.
HTML:
<nav aria-label="Main navigation">
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/projects">Projects</a>
</li>
</ul>
</nav>CSS can turn it into:
Home About ProjectsThe important principle:
Don't destroy semantic HTML just to achieve a visual layout.
Use CSS to transform the appearance.
<menu>#HTML also provides <menu>.
Example:
<menu>
<li><button type="button">Copy</button></li>
<li><button type="button">Paste</button></li>
</menu>In modern HTML, <menu> represents a group of commands or items.
However, <ul> remains the common choice for ordinary lists and navigation.
Semantic lists help assistive technologies understand that content represents a collection of related items.
Compare:
<div>
HTML
</div>
<div>
CSS
</div>
<div>
JavaScript
</div>with:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>The second explicitly communicates:
These are list items belonging to one list.
This gives assistive technology more useful structural information.
Avoid manually creating list markers:
<p>• HTML</p>
<p>• CSS</p>
<p>• JavaScript</p>If these are genuinely list items, use:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>The browser and accessibility tools can then understand the structure.
Semantic HTML means choosing the appropriate element.
If you have:
Name Age Country
Anubhav 30 India
Rahul 28 Indiathat's potentially tabular data, not simply a list.
Use:
<table>when the relationships between rows and columns are meaningful.
We'll study this in the next chapter.
<header>
<a href="/">
<img
src="logo.svg"
alt="NextGen Blog"
width="160"
height="40"
>
</a>
<nav aria-label="Main navigation">
<ul>
<li>
<a href="/" aria-current="page">
Home
</a>
</li>
<li>
<a href="/articles">
Articles
</a>
</li>
<li>
<a href="/tutorials">
Tutorials
</a>
</li>
<li>
<a href="/about">
About
</a>
</li>
<li>
<a href="/contact">
Contact
</a>
</li>
</ul>
</nav>
</header>This gives us:
Header
│
├── Logo
│
└── Navigation
│
└── List
├── Home
├── Articles
├── Tutorials
├── About
└── ContactA course can naturally use nested lists:
<h1>HTML Course</h1>
<ol>
<li>
HTML Fundamentals
<ul>
<li>What is HTML?</li>
<li>Elements</li>
<li>Attributes</li>
</ul>
</li>
<li>
Text & Content
<ul>
<li>Headings</li>
<li>Paragraphs</li>
<li>Text semantics</li>
</ul>
</li>
<li>
Links & Images
<ul>
<li>Links</li>
<li>Images</li>
<li>Responsive images</li>
</ul>
</li>
</ol>Because the course chapters have a meaningful sequence, the outer list is ordered.
Lists can help communicate content structure, but don't create lists purely for SEO.
For example:
<ul>
<li>HTML Course</li>
<li>CSS Course</li>
<li>JavaScript Course</li>
</ul>is useful when those really are a collection of items.
Search engines primarily benefit from clear, meaningful structure, not from arbitrarily wrapping content in lists.
Using <p> for list items:
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>when these represent a list.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Using <ul> when order matters:
<ul>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul><ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>Incorrect nested list:
<ul>
<li>Frontend</li>
<ul>
<li>HTML</li>
</ul>
</ul><ul>
<li>
Frontend
<ul>
<li>HTML</li>
</ul>
</li>
</ul>| Element | Purpose |
|---|---|
<ul> |
Unordered list |
<ol> |
Ordered list |
<li> |
List item |
<dl> |
Description list |
<dt> |
Description term |
<dd> |
Description/details |
<menu> |
Group of commands/items |
start
reversed
typeCreate a page called:
"My Learning Roadmap"
Structure:
My Learning Roadmap
1. Frontend
• HTML
• CSS
• JavaScript
• React
2. Backend
• Node.js
• Express
• PostgreSQL
3. DevOps
• Docker
• Kubernetes
• CI/CDRequirements:
Use:
<ol>because the learning sequence matters.
Use:
<ul>because the technologies within each category don't necessarily have a required order.
Then create a second section:
Technology Definitions
HTML
Structures web pages.
CSS
Styles web pages.
JavaScript
Adds behavior.Use:
<dl><ul>?<ol>?<li>?<ul> instead of <ol>?<ul> be placed?<dl>?<dt> and <dd>?<ol> start at a number other than 1?reversed do?type attribute on <ol> do?<ul>?<div> or <p>?<table> instead of a list?<menu>?<dt> have multiple <dd> elements?<dt> elements share a <dd>?When you see a collection of content, ask:
Is this a collection?
│
Yes
│
┌──────┴──────┐
│ │
Order matters? Description/
│ term pairs?
┌───┴───┐ │
Yes No │
│ │ │
<ol> <ul> <dl>And remember:
<ul> → Items without meaningful sequence
<ol> → Items with meaningful sequence
<dl> → Terms + descriptionsWe'll learn how to represent structured/tabular data using <table>, <tr>, <th>, <td>, <thead>, <tbody>, <tfoot>, caption, scope, colspan, rowspan, accessible tables, responsive tables, and the important difference between tables for data vs tables for layout.
Mark it as complete to track your mastery.