The Quick Start
Creating Lists in HTML
- Beginner
- December 29, 2025
Fahim ul Haq is the co-founder and CEO of Educative, the world's leading upskilling platform for and by developers. He is a former software engineer at Microsoft and Facebook with a deep passion for creating better, more efficient ways for developers to master in-demand skills.
Lists are one of the most common ways content is organized on the web. From navigation menus and feature lists to step-by-step instructions and outlines, lists help make information easier to read and understand.
In this lesson, you’ll learn how to create different types of lists in HTML, when to use each type, and how to structure them properly. You’ll also practice building lists step by step so you can confidently use them in real web pages.
By the end of this lesson, you’ll know how to create clean, readable lists that improve both usability and accessibility.
Why lists matter on the web
When content is presented as one long block of text, it becomes difficult to scan. Lists break information into clear, digestible pieces.
Browsers, search engines, and screen readers all recognize lists as grouped information. This makes lists not just visually helpful, but structurally meaningful.
Good use of lists:
- Improves readability
- Helps users scan content quickly
- Adds clear structure to pages
- Improves accessibility
Lists are about more than appearance. They communicate relationships between pieces of information.
The three main types of lists in HTML
HTML provides three primary list types:
- Unordered lists
- Ordered lists
- Description lists
Each type serves a different purpose. Choosing the right one helps your content make sense both visually and semantically.
In this lesson, you’ll learn each type one by one, starting with the most common.
Unordered lists (<ul>)
An unordered list is used when the order of items does not matter. These lists typically appear as bullet points.
Unordered lists are created using the <ul> element, and each list item is placed inside an <li> element.
Here’s a basic example:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
When displayed in the browser, this appears as a bulleted list.
Understanding list items (<li>)
The <li> tag stands for “list item.” Every item inside a list must be wrapped in an <li> element.
List items can contain text, links, images, or even other lists. They are flexible building blocks.
Without <li> elements, the browser wouldn’t know where one item ends and the next begins.
When to use unordered lists
Use an unordered list when:
- The order of items doesn’t matter
- You’re listing features, tools, or options
- You’re grouping related ideas
Examples include:
- Navigation menus
- Feature lists
- Shopping lists
- Tags or categories
If rearranging the items wouldn’t change their meaning, an unordered list is usually the right choice.
Step-by-step: creating your first unordered list
Let’s build an unordered list inside a basic HTML page.
Start with this document structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Creating Lists</title>
</head>
<body>
</body>
</html>
Now add an unordered list inside the body:
<body>
<h1>Technologies I Want to Learn</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
Save and refresh your browser. You should see a heading followed by a bulleted list.
Ordered lists (<ol>)
An ordered list is used when the order of items does matter. These lists usually appear with numbers.
Ordered lists are created using the <ol> element, with each item still wrapped in <li> tags.
Example:
<ol>
<li>Open your code editor</li>
<li>Create an HTML file</li>
<li>Write your code</li>
</ol>
The browser automatically numbers the items for you.
When to use ordered lists
Use an ordered list when:
- Steps must be followed in sequence
- Ranking or priority matters
- The list represents a process
Examples include:
- Tutorials and instructions
- Recipes
- Checklists with order
- Rankings
If changing the order would change the meaning, an ordered list is the correct choice.
Step-by-step: building an ordered list
Add this to your HTML body:
<h2>How to Create an HTML File</h2>
<ol>
<li>Create a new file</li>
<li>Name it index.html</li>
<li>Open it in a browser</li>
</ol>
Save and refresh. Notice how the browser automatically numbers each step.
You don’t need to type the numbers yourself. HTML handles that for you.
Nesting lists (lists inside lists)
Sometimes, list items need sub-items. HTML allows lists to be nested inside other lists.
Here’s an example of a nested unordered list:
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend</li>
</ul>
The nested list is placed inside a list item. This structure shows hierarchy clearly.
Nested ordered and unordered lists together
You can mix ordered and unordered lists depending on the meaning.
Example:
<ol>
<li>Learn HTML
<ul>
<li>Headings</li>
<li>Paragraphs</li>
<li>Lists</li>
</ul>
</li>
<li>Learn CSS</li>
</ol>
This indicates a sequence of steps, with subtopics under each step.
Description lists (<dl>)
A description list is used when you want to pair terms with descriptions.
This type of list uses:
<dl>for the list<dt>for the term<dd>for the description
Example:
<dl>
<dt>HTML</dt>
<dd>The language used to structure web pages.</dd>
<dt>CSS</dt>
<dd>The language used to style web pages.</dd>
</dl>
Description lists are useful for definitions, glossaries, and key-value data.
When to use description lists
Use description lists when:
- Each item has a label and an explanation
- You’re defining terms
- You’re presenting metadata or details
They are less common than <ul> and <ol>, but very useful in the right context.
Step-by-step: building a description list
Add this to your page:
<h2>Web Development Terms</h2>
<dl>
<dt>Browser</dt>
<dd>A program used to view websites.</dd>
<dt>HTML</dt>
<dd>The structure of a web page.</dd>
</dl>
Save and refresh to see how the browser formats the list.
Lists and accessibility
Screen readers announce lists and list items clearly, which helps users understand grouped information.
They also announce whether a list is ordered or unordered and how many items it contains. This makes lists extremely valuable for accessibility.
Using the correct list type improves navigation and comprehension for all users.
Common beginner mistakes with lists
A frequent mistake is placing text directly inside <ul> or <ol> without using <li> tags. This breaks the list structure.
Another mistake is using lists just for indentation or layout. Lists should represent grouped information, not visual spacing.
Always choose list types based on meaning, not appearance.
Lists vs paragraphs
Lists are not replacements for paragraphs. Use paragraphs for full sentences and ideas. Use lists when content is naturally grouped.
If you find yourself separating items with commas, that might be a sign that a list would work better.
Practice: build a complete list section
Replace part of your body content with this example:
<h1>Learning Web Development</h1>
<p>
Web development involves several core technologies. Below is a breakdown of
what I plan to learn.
</p>
<h2>Core Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>Learning Steps</h2>
<ol>
<li>Understand HTML basics</li>
<li>Practice building pages</li>
<li>Learn CSS for styling</li>
</ol>
<h2>Key Definitions</h2>
<dl>
<dt>Frontend</dt>
<dd>The part of a website users interact with.</dd>
<dt>Backend</dt>
<dd>The server-side logic behind a website.</dd>
</dl>
Save and refresh. You’ve now used all three list types correctly in one page.
How lists prepare you for CSS and navigation
Later, you’ll use CSS to style lists into menus, sidebars, and layouts. Most navigation menus start as unordered lists.
If your list structure is correct, styling becomes much easier and more predictable.
Good HTML structure always comes first.
What you should understand after this lesson
By now, you should be comfortable with:
- Creating unordered lists with
<ul> - Creating ordered lists with
<ol> - Creating description lists with
<dl> - Nesting lists correctly
- Choosing the right list type based on meaning
You don’t need to memorize everything. Focus on understanding why each list exists and when to use it.
What’s next?
Now that you know how to create and structure lists, you’re ready to work with links.
In the next lesson, you’ll learn how to create hyperlinks, connect pages together, and build simple navigation using the <a> tag.
Before moving on, try turning one of your written notes or plans into a structured HTML list. Practicing with real content is the fastest way to build confidence.