A Guide to Creating Lists Using HTML

Introduction

Lists are a common part of web pages. You can use them to show steps, menus, features, ingredients, instructions, links, and grouped information.

HTML gives you three main types of lists:

1. Unordered lists
2. Ordered lists
3. Description lists

Each list type has a different purpose. Once you understand how they work, you can use lists to structure information clearly and improve the readability of your web pages.

What Is an HTML List?

An HTML list is a group of related items. For example, you might use a list to show website navigation links:

1<ul>2  <li>Home</li>3  <li>About</li>4  <li>Contact</li>5</ul>

In the browser, this would usually appear as a bulleted list:

1• Home2• About3• Contact

The list itself is created using a list container, and each item inside the list is created using an <li> element.

The letters li stand for “list item”.

Unordered Lists

An unordered list is used when the order of the items does not matter.

For example, you might use an unordered list for a group of features, shopping items, or navigation links.

An unordered list is created using the <ul> element.

1<ul>2  <li>Fast loading pages</li>3  <li>Mobile-friendly design</li>4  <li>Clear navigation</li>5</ul>

The letters ul stand for “unordered list”.

By default, most browsers display unordered lists with bullet points.

The example above would usually appear like this:

1• Fast loading pages2• Mobile-friendly design3• Clear navigation

Use an unordered list when the items belong together, but do not need to appear in a specific sequence.

Ordered Lists

An ordered list is used when the order of the items matters.

For example, you might use an ordered list for instructions, rankings, recipes, or step-by-step processes.

An ordered list is created using the <ol> element.

1<ol>2  <li>Open your code editor</li>3  <li>Create a new HTML file</li>4  <li>Add your list markup</li>5  <li>Open the file in your browser</li>6</ol>

The letters ol stand for “ordered list”.

By default, most browsers display ordered lists with numbers.

The example above would usually appear like this:

11. Open your code editor22. Create a new HTML file33. Add your list markup44. Open the file in your browser

Use an ordered list when changing the order would change the meaning of the content.

List Items

Both unordered and ordered lists use the <li> element for each item.

Here is an unordered list:

1<ul>2  <li>HTML</li>3  <li>CSS</li>4  <li>JavaScript</li>5</ul>

Here is an ordered list:

1<ol>2  <li>Write the HTML</li>3  <li>Add the CSS</li>4  <li>Test the page</li>5</ol>

The important point is that <li> elements should be placed inside a list container, such as <ul> or <ol>.

Description Lists

A description list is used for terms and descriptions. It is useful for glossaries, definitions, metadata, FAQs, and structured information where one item needs an explanation.

A description list is created using the <dl> element.

Inside it, you use:

1<dt>

for the term, and:

1<dd>

for the description.

Here is an example:

1<dl>2  <dt>HTML</dt>3  <dd>The language used to structure content on the web.</dd>4 5  <dt>CSS</dt>6  <dd>The language used to style web pages.</dd>7 8  <dt>JavaScript</dt>9  <dd>A programming language used to add interactivity to web pages.</dd>10</dl>

The letters dl stand for “description list”.

The letters dt stand for “description term”.

The letters dd stand for “description details” or “description definition”.

In a browser, description lists are usually displayed with the description indented underneath the term.

Choosing the Right Type of List

Use an unordered list when the order does not matter:

1<ul>2  <li>Apples</li>3  <li>Bananas</li>4  <li>Oranges</li>5</ul>

Use an ordered list when the order does matter:

1<ol>2  <li>Preheat the oven</li>3  <li>Mix the ingredients</li>4  <li>Bake for 25 minutes</li>5</ol>

Use a description list when you are pairing terms with descriptions:

1<dl>2  <dt>Domain name</dt>3  <dd>The address people type to visit a website.</dd>4 5  <dt>Hosting</dt>6  <dd>The service that stores your website files online.</dd>7</dl>

The right list type depends on the meaning of the content, not just how you want it to look.

Nested Lists

A nested list is a list inside another list.

Nested lists are useful when you need to show sub-items. For example, you might have a list of web development topics, with smaller lists inside each topic.

1<ul>2  <li>HTML3    <ul>4      <li>Headings</li>5      <li>Paragraphs</li>6      <li>Lists</li>7    </ul>8  </li>9  <li>CSS10    <ul>11      <li>Colours</li>12      <li>Fonts</li>13      <li>Layouts</li>14    </ul>15  </li>16</ul>

This creates a list where “HTML” and “CSS” each have their own sub-list.

When nesting lists, place the second list inside the relevant <li> element.

Changing the Numbering in Ordered Lists

Ordered lists are numbered by default, but HTML lets you adjust the numbering.

For example, you can start a list at a different number using the start attribute:

1<ol start=”5″>2  <li>Review your code</li>3  <li>Fix any errors</li>4  <li>Publish the page</li>5</ol>

This would start the list at number 5.

You can also change the type of marker using the type attribute:

1<ol type=”A”>2  <li>Introduction</li>3  <li>Main content</li>4  <li>Conclusion</li>5</ol>

This would usually display the list using capital letters:

1A. Introduction2B. Main content3C. Conclusion

Common type values for ordered lists include:

1<ol type=”1″>

Numbers: 1, 2, 3

1<ol type=”A”>

Uppercase letters: A, B, C

1<ol type=”a”>

Lowercase letters: a, b, c

1<ol type=”I”>

Uppercase Roman numerals: I, II, III

1<ol type=”i”>

Lowercase Roman numerals: i, ii, iii

Reversing an Ordered List

You can reverse the numbering of an ordered list by using the reversed attribute.

1<ol reversed>2  <li>Third place</li>3  <li>Second place</li>4  <li>First place</li>5</ol>

This would usually display the list in reverse numbering order:

13. Third place22. Second place31. First place

This can be useful for countdowns or ranked lists.

Styling Lists with CSS

HTML should be used to describe the structure and meaning of the content. CSS should be used to control how the list looks.

For example, you can remove bullet points from a list:

1<ul class=”nav-list”>2  <li>Home</li>3  <li>About</li>4  <li>Contact</li>5</ul>

1.nav-list {2  list-style-type: none;3}

You can also add spacing between list items:

1.nav-list li {2  margin-bottom: 10px;3}

Or you can display list items in a row, which is common for navigation menus:

1.nav-list {2  list-style-type: none;3  display: flex;4  gap: 20px;5}

This keeps the HTML meaningful while allowing CSS to control the layout.

Lists for Navigation Menus

Lists are often used to create website navigation menus because navigation is usually a group of related links.

Here is a simple example:

1<nav>2  <ul>3    <li><a href=”index.html”>Home</a></li>4    <li><a href=”about.html”>About</a></li>5    <li><a href=”services.html”>Services</a></li>6    <li><a href=”contact.html”>Contact</a></li>7  </ul>8</nav>

The <nav> element tells the browser that this section contains navigation links.

The <ul> element groups the links together.

Each <li> contains one navigation item.

Each <a> element creates a hyperlink.

Common Mistakes to Avoid

One common mistake is placing list items outside the list container.

Incorrect:

1<li>Home</li>2<li>About</li>3<li>Contact</li>

Correct:

1<ul>2  <li>Home</li>3  <li>About</li>4  <li>Contact</li>5</ul>

Another common mistake is using line breaks instead of list markup.

Incorrect:

1Apples<br>2Bananas<br>3Oranges<br>

Correct:

1<ul>2  <li>Apples</li>3  <li>Bananas</li>4  <li>Oranges</li>5</ul>

Using proper list markup makes the page more meaningful, more accessible, and easier to style.

A third mistake is choosing a list type based only on appearance.

For example, do not use an unordered list just because you want bullet points. Use it because the order does not matter. Likewise, use an ordered list when sequence is part of the meaning.

Accessibility and Lists

Lists help screen readers and other assistive technologies understand how items are grouped.

For example, a screen reader may announce that a list contains a certain number of items. This helps users understand the structure of the content before going through each item.

For accessibility, use real HTML list elements instead of manually typing symbols, numbers, or line breaks.

Better:

1<ol>2  <li>Create the file</li>3  <li>Write the HTML</li>4  <li>Test the page</li>5</ol>

Avoid:

11. Create the file<br>22. Write the HTML<br>33. Test the page<br>

The first version gives the browser meaningful structure. The second version only gives visual text.

A Complete Example

Here is a simple HTML page using different types of lists:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>HTML Lists Example</title>6</head>7<body>8 9  <h1>HTML Lists</h1>10 11  <h2>Unordered List</h2>12  <ul>13    <li>Simple syntax</li>14    <li>Clear structure</li>15    <li>Easy to style</li>16  </ul>17 18  <h2>Ordered List</h2>19  <ol>20    <li>Create an HTML file</li>21    <li>Add your list elements</li>22    <li>Open the file in a browser</li>23  </ol>24 25  <h2>Description List</h2>26  <dl>27    <dt>HTML</dt>28    <dd>Used to structure web page content.</dd>29 30    <dt>CSS</dt>31    <dd>Used to style web page content.</dd>32  </dl>33 34</body>35</html>

This example includes an unordered list, an ordered list, and a description list on the same page.

Summary

HTML lists are used to group related information.

The three main types are:

1<ul>

for unordered lists,

1<ol>

for ordered lists,

and:

1<dl>

for description lists.

List items inside unordered and ordered lists use:

1<li>

Description lists use:

1<dt>

for terms and:

1<dd>

for descriptions.

Use unordered lists when order does not matter, ordered lists when order does matter, and description lists when you need to pair terms with explanations.

Lists are simple, but they are one of the most useful tools in HTML. They help structure content clearly, improve accessibility, and make web pages easier to read.