HTML Lists and their Types: Ordered, Unordered, and Description list
HTML Lists: Lists are used to group a set of related items in lists. In HTML, there are three types of HTML lists. they are:
- Ordered list (ol)
- Unordered list (ul)
- Description or definition List ( dl)
1) HTML Ordered List / Numbered List
In the HTML ordered list, the items will be displayed with numbers by default. An ordered list starts with the <ol> tag. Each list item will begin with the <li> tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title> HTML Ordered List: PrepareExams </title>
</head>
<body>
<ol>
<li> Red </li>
<li> Black </li>
<li> Pink </li>
<li> Yellow </li>
</ol>
</body>
</html>Results:
- Red
- Black
- Pink
- Yellow
2) HTML Unordered List / Bulleted List
In the HTML Unordered list, the items will be displayed with bullets by default. An ordered list starts with the <ul> tag. Each list item will begin with the <li> tag.
<!DOCTYPE html>
<html>
<head>
<title> HTML UnOrdered List: PrepareExams </title>
</head>
<body>
<ul>
<li> Red </li>
<li> Black </li>
<li> Pink </li>
<li> Yellow </li>
</ul>
</body>
</html>Results:
- Red
- Black
- Pink
- Yellow
3) HTML Description List ( Definition List)
HTML description is also called a definition list and items are listed like a dictionary (or) encyclopedia. we use three tags in the definition list.
- <dl> tag – defines the description list,
- <dt> tag – defines the term (name),
- <dd> tag – describes each term.
Example:
<!DOCTYPE html>
<html>
<body>
<h2> Description List: PrepareExams </h2>
<dl>
<dt> Colors List: </dt>
<dd> - Red </dd>
<dd> - Black </dd>
<dt> Fruits List: </dt>
<dd> - Mango </dd>
<dd> - Apple </dd>
</dl>
</body>
</html>Output:
- Colors List:
- – Red
- – Black
- Fruits List:
- – Mango
- – Apple