In HTML, a list is a great way to organize and present information. Lists can be used to display a series of items, such as a shopping list or a collection of tasks.
But can a list have any data type? Let’s explore this question and understand the different types of lists in HTML.
Unordered Lists
The most common type of list in HTML is the unordered list, denoted by the <ul>
tag. This type of list does not have any specific order and is typically represented by bullet points. Each item in the list is wrapped in <li>
tags.
For example:
<ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul>
Would render as:
- Apple
- Banana
- Orange
Ordered Lists
If you want to create a list with a specific order, you can use an ordered list. This type of list is denoted by the <ol>
tag and each item is wrapped in <li>
tags just like unordered lists.
<ol> <li>First</li> <li>Second</li> <li>Third</li> </ol>
- First
- Second
- Third
Nested Lists
Lists can also be nested within each other to create a hierarchical structure. This is useful when you need to present information with multiple levels of organization. To create a nested list, simply include another list (<ul>
or <ol>
) and its items within an existing list item (<li>
) of the parent list.
<ul> <li>Fruits <ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul> </li> <li>Vegetables <ul> <li>Carrot</li> <li>Broccoli</li> <li>Spinach</li> </ul> </li> </ul>
- Fruits
- Apple
- Banana