Define list in HTML. Explain the different types of list with example.
HTML offers web creators three different ways for determining arrangements of data. All list should contain at least one list components. Records may contain −
• <ul> − An unordered list. This will list things utilizing plain projectiles.
• <ol> − An ordered list. This will utilize various plans of numbers to list your things.
• <dl> − A definition list. This organizes your things similarly as they are masterminded in a word reference.
HTML Unordered Lists
An unordered list is an assortment of related things that have no uncommon request or grouping. This list is made by utilizing HTML <ul> tag. Every thing in the rundown is set apart with a projectile.
Example:-
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Car</li>
<li>Truck</li>
<li>Train</li>
<li>Flight</li>
</ul>
</body>
</html>
This will produce the following result,
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Honda</li>
<li>Yamaha</li>
<li>TVS</li>
<li>KTM</li>
</ul>
</body>
- Car
- Truck
- Train
- Flight
The type Attribute
You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a
disc. Following are the possible options −
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
Example:-
Following is an example where we used <ul type = "square">
<!DOCTYPE html>
<html>
<head><title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Honda</li>
<li>Yamaha</li>
<li>TVS</li>
<li>KTM</li>
</ul>
</body>
</html>
This will produce the following result −
▪ Honda ▪ Yamaha
▪ TVS
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Lemon Juice</li>
<li>Apple Juice</li>
<li>Carot Juice</li>
<li>Milk Shake</li>
</ul>
</body>
• Apple Juice
• Carot Juice
▪ TVS
▪ KTM
Following is an example where we used <ul type = "disc"> −
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Lemon Juice</li>
<li>Apple Juice</li>
<li>Carot Juice</li>
<li>Milk Shake</li>
</ul>
</body>
</html>
This will produce the following result –
• Lemon Juice• Apple Juice
• Carot Juice
• Mike Shake
HTML Ordered Lists
In the event that you are needed to place your things in a numbered list rather than bulleted, then, at that point HTML requested rundown will be utilized. This rundown is made by utilizing <ol> tag. The numbering begins at one and is augmented by one for each progressive arranged rundown component labeled with <li>.
Example
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce the following result −
2. Ginger
3. Potato
4. Radish
The type Attribute
You can use the type attribute for <ol> tag to specify the type of numbering you like to want. By default, it is a number. Following are the possible options −
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
Example
Following is an example where we used <ol type = "1">
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>PUBG</li>
<li>PUBG Mobile</li>
<li>Free Fire</li>
<li>Call of Duty</li>
</ol>
</body>
1. PUBG
2. PUBG Mobile
3. Free Fire
<!DOCTYPE html> </html>
This will produce the following result −
2. PUBG Mobile
3. Free Fire
4. Call of Duty
Following is an example where we used <ol type = "I">
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "I">
<li>First class</li>
<li>Second class</li>
<li>Third class</li>
<li>Fourth class</li>
</ol>
</body>
</html>
This will produce the following result −
I. First class
II. Second class
III. Third class
IV. Fourth class
The start Attribute
You can use start attribute for <ol> tag to specify the starting point of numbering you need.
Following are the possible options −
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.
Example
Following is an example where we used <ol type = "i" start = "4" >
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li>Tourist Bus</li>
<li>Govt Bus</li>
<li>Route Bus</li>
<li>School Bus</li>
</ol>
</body>
</html>
This will produce the following result −
iv. Tourist Bus
v. Govt Bus
vi. Route Bus
vii. School Bus
HTML Definition Lists
HTML and XHTML upholds a rundown style which is called definition list where passages are recorded like in a word reference or reference book. The definition list is the best method to introduce a glossary, list of terms, or other name/esteem list.
Definition List utilizes following three labels.
• <dl> − Defines the beginning of the rundown
• <dt> − A term
• <dd> − Term definition
• </dl> − Defines the finish of the rundown
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
This will produce the following result −
HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol
Want to Learn HTML, then Click Here
No comments:
Post a Comment