HTML list
HTML lists are used to present information in a structured and organized manner. There are three main types of lists in HTML: ordered lists (`<ol>`), unordered lists (`<ul>`), and definition lists (`<dl>`).
Types of HTML list
Here's an explanation of each,
Ordered Lists (`<ol>`)
- Ordered lists are used to present a list of items in a specific sequence or order.
- Each item in the list is marked with a number (by default) or another type of marker, such as letters or Roman numerals.
- Items in an ordered list are enclosed within <li> (list item) tags.
Example-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List</title>
</head>
<body>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</body>
</html>Output-
- First item
- Second item
- Third item
Unordered Lists (<ul>)
- Unordered lists are used to present a list of items in no particular order or sequence.
- Each item in the list is marked with a bullet point (by default) or another type of marker, such as a square or circle.
- Items in an unordered list are also enclosed within <li> (list item) tags.
Example-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unordered List</title>
</head>
<body>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
</body>
</html>Output-
- Red
- Green
- Blue
Definition Lists ( <dl> )
- Definition lists are used to present a list of terms and their corresponding definitions or descriptions.
- Each term in the list is marked with a term tag <dt> (definition term), and each definition is marked with a definition tag <dd> (definition description).
Example-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Definition List</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JS</dt>
<dd>JavaScript</dd>
</dl>
</body>
</html>Output-
HTML
- Hypertext Markup Language
CSS
- Cascading Style Sheets
JS
- JavaScript
Lists can be nested within one another, allowing for more complex structures. Lists provide a flexible way to present information in a structured and readable format on web pages.
Leave a Comment