HTML Lists
In this tutorial you will learn how to create different types of lists in HTML.
HTML Lists
❮ Previous Next ❯
HTML lists allow web developers to group a set of related items in lists.
Example
An unordered HTML list:
- Item
- Item
- Item
- Item
An ordered HTML list:
- First item
- Second item
- Third item
- Fourth item
How to Make Lists in HTML
In HTML, we can list items either in an ordered or unordered fashion.
An ordered list uses numbers or some sort of notation that indicates a series of items.
For example, an ordered list can start with number 1, and continue through 2, 3, 4, and so on. Your ordered list can also start with the letter A and go through B, C, D, and so on.
Here is an example of an ordered list with students' names and marks.
On the other hand, we have unordered lists, like a TODO list for example. Here I am so passionate about coding that I skipped my breakfast 🤓.
There is one more type of list called a description list that we will learn as well below.
Now let's get into a bit more detail and see how to create each type of list in HTML.
10 Lists
Contents
- Introduction to lists
- Unordered lists (UL), ordered lists (OL), and list items (LI)
- Definition lists: the DL, DT, and DD elements
- Visual rendering of lists
- The DIR and MENU elements
Types of HTML Lists
- (ol)- Ordered List
- (ul)- Unordered List(Bulleted list)
- (dl)- Description List
HTML List Tags Examples
Ordered List /Numbered List (ol)
The <ol> tag is used to create an ordered list and <li> tag starts the list of items. It is also called as a numbered list because list items are marked with numbers.
<ul>: The Unordered List element
The <ul> HTML element represents an unordered list of items, typically rendered as a bulleted list.
| Flow content, and if the <ul> element's children include at least one <li> element, palpable content. |
| Zero or more <li>, <script> and <template> elements. |
| None, both the starting and ending tag are mandatory. |
| Any element that accepts flow content. |
| list |
| directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree |
| HTMLUListElement |