Key Takeaways

• HTML lists are essential for organizing and presenting data on a web page. There are three main types: ordered, unordered, and description lists.
• Ordered lists use numbers or other characters to order the items. The type attribute allows customization, while start and reversed attributes change the starting position and order.
• Unordered lists group related items without a specific order. The bullet style can be customized using CSS.

An HTML list is an essential structural element for any group of related data on a web page. Whether you’re creating a menu, organizing items on sale, or trying to present complex data in a more readable form, the following lists will help you get the job done.

There are three main types of HTML lists, each serving a specific structural purpose in web development.

1. Ordered List

The HTML ordered list allows you to group a list of related items in a specific order. To create a new ordered list, you’ll need to use the <ol> tag. The <ol> tag groups, and contains, <li> tags. Each list element (<li> tag) will contain a specific item in the list.

 
<ol> 
  <li>Item 1</li> 
  <li>Item 2</li> 
  <li>Item 3</li> 
  <li>Item 4</li>
</ol> 

This code renders the following view:

You should note that the ordered list’s default ordering type is numbers, but you can change this using the type attribute. The type attribute gives you the power to decide what element will order your list. You have the option of using the alphabet (uppercase or lowercase), numbers, or Roman numerals (uppercase or lowercase).

 
<ol type="a"> 
  <li>Item 1</li> 
  <li>Item 2</li> 
  <li>Item 3</li> 
  <li>Item 4</li>
</ol> 

Adding the type attribute to the <ol> tag renders the following updated view:

In addition to the type attribute, there are two other attributes that you can use with the <ol> tag: start and reversed.

The start attribute allows you to start ordering from any position using an integer value. For example, if you add start=”3″ to the <ol> tag, without specifying a type, it will start ordering the list from the number three. If you assign a type=”a” or a type=”I”, it will start ordering from c or III, respectively.

 
<ol type="I" start="3"> 
  <li>Item 1</li> 
  <li>Item 2</li> 
  <li>Item 3</li> 
  <li>Item 4</li>
</ol> 

The code above renders the following view:

The reversed attribute allows you to reverse the order of the list. It accepts a boolean value, and its default value is false.

 
<ol reversed="true"> 
  <li>Item 1</li> 
  <li>Item 2</li> 
  <li>Item 3</li> 
  <li>Item 4</li>
</ol> 

This code produces the following output in the browser:

2. Unordered List

The unordered list lets you group related items whose order is not significant. By default, a browser uses a bullet point to label each item.

To create a new unordered list, you’ll need to use the <ul> tag as a parent element and the <li> tag for each list item:

 <ul>
  <li>Item 1</li>
  <li>Item 2</li> 
  <li>Item 3</li> 
  <li>Item 4</li>
</ul> 

This code renders the following view:

The default bullet style for an unordered list is a disc. In the past, you could use a type attribute to set the bullet style of an unordered list. However, the unordered list type attribute is now a deprecated attribute. The recommended alternative for unordered list styling is the CSS list-style-type property.

 <style>
ul { list-style-type: square; } 
</style> 

The code above updates the view to the following:

The CSS list-style-type property lets you use a collection of different bullet styles, including circles, custom images, icons, or symbols. With CSS that changes the layout of list items, you can even use unordered lists to create navigation bars.

Nested Lists

A nested list is a list element that is part of another list. You can create a nested list using a combination of ordered and/or unordered list elements. These structures can represent more complex hierarchies.

 <H3>Chicken Pasta Insturctions</H3>
<ol> 
  <li>Boil pasta.</li> 
  <li>
   Season chicken breast.
    <ul> 
      <li>salt and pepper</li> 
      <li>paprika</li> 
      <li>garlic powder</li> 
      <li>Italian seasoning</li> 
    </ul>
  </li>
  <li>Heat olive oil in pot over medium-high heat.</li> 
  <li>Add chicken breast to pan and cook for 5 minutes.</li> 
  <li>Add heavy cream and parmesan cheese to empty pot.</li> 
  <li>Add pasta and slice chicken to cream sauce.</li>
</ol> 

This code renders the following view:

3. Description List

The description list element allows you to create a list of terms and their associated details. The <dl> tag enables you to create a new description list, which you should use with the <dt> (description term) and <dd> (description details) elements.

 <h3>Popular Laptops</h3>
<dl>
  <dt>MacBook Pro</dt> 
  <dd> 
    Provides up to 22 hours of battery life, 
    has an advanced camera, and a magic keyboard with touch ID. 
  </dd>
  <dt>MSI GS76 Stealth</dt> 
  <dd>
    A powerful gaming laptop with supercharged graphics and customized keys. 
  </dd>
</dl> 

The code above renders the following view:

Organize Your Content With the Right HTML List

The HTML list that you choose to use in your web development project should depend on the content that you want to present to your users. For example, if you want to create a sequential list such as the steps for preparing a meal or completing a task, then an ordered list is your best option.

However, if you want to group related information that doesn’t require a series of steps (such as a checklist), then an unordered list would be a more viable option. Furthermore, if you want to create a glossary or a list of frequently asked questions, then a description list is the better choice.