To specify lists of information, an HTML List is used, which can be any of the three different types.
- Ordered List or Numbered List (ol)
- Unordered List or Bulleted List (ul)
- Description List or Definition List (dl)
HTML Ordered List or Numbered List:
As the name itself suggests, all the list items are marked with numbers by default in a Numbered List. It is popularly known as HTML Ordered List and hence starts with the <ol> tag. The list items in an HTML Ordered List start with the <li> tag.
Example:
<!DOCTYPE html> <html> <body> <h2>HTML Ordered List or Numbered List</h2> <ol> <li>Name</li> <li>Age</li> <li>Address</li> </ol> </body> </html>
Explanation:
In the above example, we created an ordered or numbered list in HTML containing three items.
HTML Unordered List or Bulleted List:
As the name itself suggests, all the list items are marked with bullets by default in a Bulleted List. It is popularly known as HTML Unordered List and hence starts with the <ul> tag. The list items in an HTML Unordered List start with the <li> tag.
Example:
<!DOCTYPE html> <html> <body> <h2>HTML Unordered List or Bulleted List</h2> <ul> <li>Name</li> <li>Age</li> <li>Address</li> </ul> </body> </html>
Explanation:
In the above example, we created an unordered or bulleted list in HTML containing three items.
HTML Description List or Definition List:
In the HTML Description list, entries are listed like a dictionary or encyclopedia, and hence it is also called a Definition List. To display a glossary, a list of terms, or other name-value lists, the HTML Description list can be the best choice.
Example:
<!DOCTYPE html> <html> <body> <h2>HTML Description List or Definition List</h2> <dl> <dt><b>Name</b></dt> <dd>- Write your Full name in Capital letters.</dd> <dt><b>Age</b></dt> <dd>- Write your actual age.</dd> <dt><b>Address</b></dt> <dd>- Write your permanent address details.</dd> </dl> </body> </html>
Explanation:
In the above example, we created a description or definition list in HTML containing three items along with their definitions.
HTML Nested List:
A nested list can be simply understood as a list within another list. The lists within a nested list need not be of the same type.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Nested List</h2>
<ul>
<li>Name</li>
<li>Age</li>
<li>Address
<ol>
<li>Local Address</li>
<li>Permanent Address</li>
</ol>
</li>
</ul>
</body>
</html>
Explanation:
In the above example, we created a nested list in HTML. It includes an unordered list of three items. One of the items on this list contains an ordered list of two items.