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 thetag. Thetaggroups, and contains,tags. Each list element (tag) will contain a specific item in the list.
This code renders the following view:
You should note that the ordered list’s default orderingtypeis numbers, but you’re able to change this using thetype attribute. Thetype attributegives 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).
Adding thetype attributeto thetagrenders the following updated view:
In addition to the type attribute, there are two other attributes that you’re able to use with thetag:startandreversed.
Thestart attributeallows you to start ordering from any position using an integer value. For example, if you addstart=“3"to thetag, without specifying atype, it will start ordering the list from the number three. If you assign atype=“a"or atype=“I”, it will start ordering from c or III, respectively.
The code above renders the following view:
Thereversed attributeallows you to reverse the order of the list. It accepts a boolean value, and its default value is false.
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 thetag as a parent element and thetag for each list item:
The default bullet style for an unordered list is a disc. In the past, you could use atypeattribute to set the bullet style of an unordered list. However, the unordered list type attribute is nowa deprecated attribute. The recommended alternative for unordered list styling is theCSS list-style-type property.
The code above updates the view to the following:
TheCSS list-style-type propertylets 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 evenuse 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.
3. Description List
The description list element allows you to create a list of terms and their associated details. Thetagenables you to create a new description list, which you should use with the(description term) and(description details) elements.
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.
