What is List in HTML?
- HTML Lists are used to group the items in a list.
- In HTML there are mainly three types of lists.
- HTML lists are: Ordered List, Unordered List, and Description Lists
- And list items are created using <li> tag.
1). Ordered List in HTML
- <ol> tag is used to create Ordered Lists.
- Ordered List are used to display the data and information in the given order.
- Types of the ordered list are: 1, A, a, I, i
<ol> <li> HTML Simplified </li> <li> CSS Master </li> <li> JavaScript Simplified </li></ol>
- <ol> tag is used to create Ordered Lists.
- Ordered List are used to display the data and information in the given order.
- Types of the ordered list are: 1, A, a, I, i
<ol>
<li> HTML Simplified </li>
<li> CSS Master </li>
<li> JavaScript Simplified </li>
</ol>
( Try to use 1, a, A, I, and i at the place of <ol type="A"> )
Output:
1. HTML Simplified
2. CSS Master
3. JavaScript Simplified
2). Unordered List in HTML
- Unordered Lists are created using <ul> tag.
- This type of list represents the data without any specific order.
- Types of ordered lists are disc, circle, square, and none.
<ul> <li> HTML Simplified </li> <li> CSS Master </li> <li> JavaScript Simplified </li></ul>
- Unordered Lists are created using <ul> tag.
- This type of list represents the data without any specific order.
- Types of ordered lists are disc, circle, square, and none.
<ul>
<li> HTML Simplified </li>
<li> CSS Master </li>
<li> JavaScript Simplified </li>
</ul>
( Try to use disc, circle, square, and none to change the type of unordered list.)
Output:
- HTML Simplified
- CSS Master
- JavaScript Simplified
3). Description List in HTML
- This type of list is used to represent elements in definition form like a dictionary.
- In this list <dl> tag defines the description list, <dt> tag defines the term, and the <dd> tag describes each term in
<dl> <dt> HTML Simplified </dt> <dd> This is complete series of HTML </dd> <dt> CSS Master </dt> <dd> This will help you to master CSS </dd></dl>
- This type of list is used to represent elements in definition form like a dictionary.
- In this list <dl> tag defines the description list, <dt> tag defines the term, and the <dd> tag describes each term in
<dl>
<dt> HTML Simplified </dt>
<dd> This is complete series of HTML </dd>
<dt> CSS Master </dt>
<dd> This will help you to master CSS </dd>
</dl>
Output:
Code Described in the video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Lists in HTML </title>
</head>
<body>
<h1> Lists in HTML </h1>
<h2> Ordered List </h2>
<ol type="A">
<li> HTML Tutorial </li>
<li> CSS Tutorial </li>
<li> JavaScript Tutorial </li>
<li> ReactJS Tutorial </li>
<li> NodeJS Tutorial </li>
</ol>
<h2> Unordered List</h2>
<ul type="square">
<li> HTML Tutorial </li>
<li> CSS Tutorial </li>
<li> JavaScript Tutorial </li>
<li> ReactJS Tutorial </li>
<li> NodeJS Tutorial </li>
</ul>
<h2> Description Lists </h2>
<dl>
<dt> HTML Simplified </dt>
<dd> This is complete series of HTML </dd>
<dt> CSS Master </dt>
<dd> This will help you to master CSS </dd>
</dl>
</body>
</html>
