HTML – Lists
HTML offers different ways for specifying list of information. A list must contain one or more list elements.
Types of Lists:
Unordered list
Ordered list
Unordered list – The unnumbered or unordered lists are bulleted lists. These lists are marked by <UL> and
</UL> tags. To make an unnumbered, bulleted list:
1. Start with an opening list <UL> tag.
2. Enter the <LI> (list item) tag followed by the individual item.
3. End the entire list with a closing list </UL> tag.
Example:
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body> </html>
This will produce the following result:
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:
<ul type = "square">
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
This will produce the following result:
Example : <ul type = "disc">
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
This will produce the following result:
Example: <ul type = "circle">
Ordered list - The numbered or ordered list is identical to an unnumbered list, except it uses <OL> instead
of <UL>. The items that are tagged with <LI> appear numbered e.g. 1,2,3 etc.
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:
The type Attribute
You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number.
Following are the possible options:
<ol type = "1"> - Arabic Numerals
<ol type = "I"> - Capital Roman Numerals.
<ol type = "i"> - Lower-case Roman Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
Example:
<ol type = "1">
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce the following result:
Example:
<ol type = "A" >
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce the following result:
Nidhi Sharma
August 11, 2021
-------------------------
