In HTML, you can display lists of information in multiple manners. You can display it as an ordered, unordered or description list. The two most commonly used lists types are ordered and unordered lists, but we will also cover description lists, as they can be extremely useful.
Lists in HTML are made up of two main tags. The tag that creates the type of list (ordered, unordered or description) and the tags that create the list or description items to be displayed in the HTML list.
- Unordered list —Created with
<ul>list tag and<li>list items displayed in no specific order. - Ordered list — Created with
<ol>list tag and<li>list items displayed in a specific order. - Description list — Created with
<dl>list tag using the<dt>to create titles and<dd>to create descriptions.
As you can see above lists can be very useful in displaying content on a webpage in an orderly manner.
What are lists in HTML?
Lists are used to organize relevant bits of information together to be linked and easy to read. Lists are workhorse components in modern web construction, commonly utilized for navigation and general content.
What is the significance of the list in HTML?
From a structural standpoint, lists are beneficial since they aid in creating a well-structured, more accessible, and easy-to-maintain text. They’re also helpful since they provide specific components to apply CSS styles.
Finally, semantically accurate lists make your website easier to read for visitors and make maintenance easier when your pages need to be changed.
How many types of list tags are there in HTML
Before we get into the code examples for each type of list, let’s first understand the different types of lists and their use.
In HTML 3 types of lists can be used:
- Unordered list — Creates a list of related items in no specific order.
- Ordered list — Creates a list of related items in a specific order.
- Description list — Creates a list of terms and their descriptions.
The above is an example of an unordered list, indicated by the bullets. Below is an example of the same content in an ordered list
- Unordered list — Creates a list of related items in no specific order.
- Ordered list — Creates a list of related items in a specific order.
- Description list — Creates a list of terms and their descriptions.
Although considering that we are describing with a list item, the most appropriate list that we should use would be the description list, which would be reflected as follows:
Unordered list
Creates a list of related items in no specific order.
Ordered list
Creates a list of related items in a specific order.
Description list
Creates a list of terms and their descriptions.
What is the code for lists in HTML?
The code used for a list depends on the list you want to create, namely, an ordered, unordered or description list.
Depending on the type of list you want to create, you would use different tags; therefore, we have broken each list type down and provided individual code examples for each HTML list type. Feel free to click on the one that is most relevant to you.
HTML Unordered List with Example
HTML Ordered List with Example
HTML Description List with Example
Attributes to use with list tags
As with most elements in HTML, you can attach attributes to list tags, but in the case of list tags, these attributes are limited to global attributes such as style, class and ids, which we will cover in later articles. If you are unsure what attributes are you can learn more about the different types of HTML attributes in this article.
What is the difference between ordered and unordered lists in HTML
There are two main differences between ordered and unordered lists. The first difference is the tag used to create the list. The <ol> tag is used with an ordered list, and the <ul> tag is used with an unordered list. The second difference is how the list is displayed in the browser. Ordered lists will display sequential numbers, while unordered lists display bullet points.
Conclusion
This article has covered the types of lists in HTML with examples. Depending on the list’s purpose or the type of content you want to display, you would select a different list.
No matter what list type you select, you can still apply all CSS stylings to the list to make it your own by adding an appropriate class attribute.
Did you that the description list type existed, and have you used it before?
I hope this article inspired you to take that leap and start learning to code. Click Here to meet other new coders like you and join our community.
