How to Use HTML Lists - Ordered, Unordered & Definition Lists Examples

HTML lists are an effective way to organize your website content. They help users easily understand information, whether it's a navigation menu or instructions.

Lists improve the structure of your website for search engines, which helps with SEO. This article will show you how HTML lists help you organize and display content clearly.

What you'll learn:

• How ordered lists work for in html
• How can you make a bulleted list in HTML
• Simple example to learn about HTML list types

Let's start by exploring the different types of HTML lists and how to use them correctly.

Types of HTML lists

HTML lists have mainly three types.

1. Ordered lists (<ol>)
2. Unordered lists (<ul>)
3. Definition lists (<dl>)

Let's explore each with examples!

1. Ordered List in HTML

HTML ordered lists show items in a specific order. The browser adds the numbers automatically, and you can change the numbering style using CSS. An example might be a ranked list of most-watched movies.

An ordered list is created using the <ol> (ordered list) element, and each item inside it is defined using the <li> (list item) tag.

Here's an example.

<ol>
    <li>Take water, tea leaves, and milk</li>
    <li>Mix everything</li>
    <li>Bake at 180°C</li>
</ol>

The browser will display the ordered list like this:

1. Take water, tea leaves, and milk
2. Mix everything
3. Bake at 100°C

This is the default style of an ordered list, where items are numbered using decimal numbers. You can also change the numbering style by using the HTML type attribute.

Here are multiple numbering formats for ordered lists:

Type	Description	Example output
1 (default)	decimal	1, 2, 3
A	uppercase letters	A, B, C
a	lowercase letters	a, b, c
I	uppercase Roman	I, II, III
i	lowercase Roman	i, ii, iii

Example of type attribute(type="I"):

<ol type="I">
  <li>Introduction</li>
  <li>Body</li>
  <li>Conclusion</li>
</ol>

This code will create an ordered list in roman order like this:

1. Introduction
2. Body
3. Conclusion

Custom Start Value in Ordered Lists

The start attribute in the <ol> tag allows you to change the starting number of an ordered list. Normally, an ordered list begins at 1, but with start, you can choose any number you want as the starting point.

Example of Custom Start Value (start="5"):

<ol start="5">
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ol>

5. Item One
6. Item Two
7. Item Three

Here the starting point will be from 5 in the ordered list. If the list type is changed to letter (type="A"), the starting point will be the 5th (E) letter of the alphabet.

<ol type="A" start="5">
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ol>

5. Item One
6. Item Two
7. Item Three

Reversed Ordered Lists (reversed)

reversed attribute on an <ol> turns a ordered list into a countdown. Instead of numbering items from 1 upward (1,2,3...), the browser starts from the last item (9,8,7...), and counts down to 1.

Here's an example of a reversed list.

<ol reversed>
  <li>Raging Bull</li>
  <li>The Shawshank Redemption</li>
  <li>The Godfather</li>
</ol>

This code will produce an reversed ordered list like this:

1. Raging Bull
2. The Shawshank Redemption
3. The Godfather

Controlling Item Numbers (value)

value attribute allows you to manually set the number for a specific list item in an ordered list. You can change the numbering for any <li> element and the browser will continue counting from that new number.

Example of value attribute (value="5"):

<ol>
  <li>Item 1</li>
  <li value="5">Item 5</li>
  <li>Item 6</li>
</ol>

1. Item 1
5. Item 5
6. Item 6

In this example, there are three items in the ordered list. The first item is automatically numbered as 1. The second item uses the value="5" attribute, which forces the numbering to go straight to 5. The third item then continues the sequence and becomes 6.

2. Unordered List in HTML

Unordered lists, as the name suggests, are used when the items do not need to follow any specific order. Each item in an unordered list is displayed with a bullet point. These bullet points help visually separate the list items. An example might be a to-do list or shopping list.

To create an this list, use the <ul> (unordered list) tag. Place each list item inside a <li> (list item) element.

Here's a quick way to make a basic bullet point list.

<ul>
    <li>Water</li>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

The browser will display an unordered list like this:

• Water
• Coffee
• Milk

Bullet points can be further customized through CSS to match your website design.

Styling the Unordered List with CSS

You can change the look of bullets in unordered lists or the numbering in ordered lists using the list-style property. For example, to create an unordered list using circle bullets, add this CSS:

ul {
  list-style: circle;
}

With this CSS property, the unordered list will look like this:

• Apples
• milk
• Eggs

If you want to use CSS to display your custom icons instead of the default bullets in an unordered list. To do this, you use the pseudo-element on each list item.

Here's an example of how you can use a custom cross icon:

ul {
  list-style: none;
}
li::before {
  content: "✘"; /* Unicode cross symbol */
}

With this CSS, the unordered list will show a custom cross icon before each item, like this:

✘Item One
✘Item Two
✘Item Three

3. Definition List in HTML

Definition lists are used to show words and their meanings. They have a list of terms inside <dt> (definition term) elements, and their meanings inside <dd> (definition description) elements.

Here's an example of a definition list:

<dl>
  <dt>Browser</dt>
  <dd>A program used to view web pages</dd>

  <dt>Server</dt>
  <dd>A computer that stores and sends web pages to browsers</dd>

  <dt>URL</dt>
  <dd>The address of a webpage 0n the internet</dd>
</dl>

This code will make a definition list that looks like this:

Browser

A program used to view web pages

Server

A computer that stores and sends web pages to browsers

URL

The address of a webpage 0n the internet

Definition lists are very useful for dictionaries, because they match each word with its meaning.

Conclusion

HTML lists look simple, but they are very important for keeping information neat and organized on a web page.

• Ordered lists (<ol>) are great when order is important, such as in step-by-step instructions, rankings, or processes.
• Unordered lists (<ul>) are best when order is not important, such as in features, menus, or bullet-style points.
• Definition lists (<dl>) let you show a term and its explanation together, so they are very good for FAQ sections.

When you know which type of list to use and in which place, your content becomes easier to read and understand for users. To get good at lists, practice by adding them to real websites, such as for menus, to‑do lists, product details, and top 10 posts.

Happy Coding!