HTML list allows us to create a list of information. Each HTML list contains one or many list elements. There are three types of HTML list
- Ordered List
- Unordered List
- Description List
Ordered HTML List:
In an ordered list, list items are shown in numbers by default. <ol> tag is used to express the ordered list and the <li>tag is used for the list item. Ordered lists are also called the number list.
Here is the Basic Structure of ordered lists
<!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>Mangoo</li>
<li>Banana</li>
<li>Apple</li>
</ol>
</body>
</html>OUTPUT:
- Mangoo
- Banana
- Apple
Ordered list Type Attributes:
Ordered lists use the type attributes which define the list as numbers, uppercase letters or Roman numbers, and lowercase letters or Roman numbersย
Number:
<ol type="1">
<li>Mangoo</li>
<li>Banana</li>
<li>Apple</li>
</ol>OUTPUT:
- Mangoo
- Banana
- Apple
Uppercase Letters:
<ol type="A">
<li>Mangoo</li>
<li>Banana</li>
<li>Apple</li>
</ol>OUTPUT:
Lowercase Letters:
<ol type="a">
<li>Mangoo</li>
<li>Banana</li>
<li>Apple</li>
</ol>OUTPUT:
Uppercase Roman Numbers:
<ol type="I">
<li>Mangoo</li>
<li>Banana</li>
<li>Apple</li>
</ol>OUTPUT:
Lowercase Roman Numbers:
<ol type="i">
<li>Mangoo</li>
<li>Banana</li>
<li>Apple</li>
</ol>OUTPUT:
HTML list Start Attribute:
An ordered list always start with 1 and increment one by one and if we want to start with 30 then we use the start attribute as follows
<ol start="30">
<li>Mangoo</li>
<li>Banana</li>
<li>Apple</li>
</ol>OUTPUT:
Nested Ordered list:
Sometimes we need a list inside the list, it is nested, and the following is the code
<ol>
<li>Vegitable</li>
<li> Fruits
<ol>
<li>Mangoo</li>
<li>Banana</li>
<li>Apple</li>
</ol>
</li>
<li>Chicken</li>
</ol>OUTPUT:
HTML Unordered list:
An unordered list is denoted by <ul> tag and a list item inside it is denoted by <li>. An unordered list is also called a bullet list.
By default, it is a bullet(small circle)
<ul>
<li>Mangoo</li>
<li>Banana</li>
<li>Apple</li>
</ul>OUTPUT:
- Mangoo
- Banana
- Apple
Unordered list style:
Instead of type, we use css property style in the unordered list and also use list-style-type
ย
<ul style="list-style-type:disc;">
<li>Mangoo</li>
<li>Banana</li>
<li>Apple</li>
</ul>Disc:
<ul style="list-style-type:disc;">
<li>Mangoo</li>
<li>Banana</li>
<li>Apple</li>
</ul>OUTPUT:
- Mangoo
- Banana
- Apple
Circle:
<ul style="list-style-type:circle;">
<li>Mangoo</li>
<li>Banana</li>
<li>Apple</li>
</ul>OUTPUT:
Square:
<ul style="list-style-type:square;">
<li>Mangoo</li>
<li>Banana</li>
<li>Apple</li>
</ul>Nested Unordered List:
An unordered list inside the list becomes a nested unordered list
<ul>
<li>Vegitable</li>
<li> Fruits
<ul>
<li>Mangoo</li>
<li>Banana</li>
<li>Apple</li>
</ul>
</li>
</ul>OUTPUT:
Description HTML list:
The description list consists of terms <dt> and a description of the term <dd>.
<dl> tag is used the describe the description list.
Here is an example
<dl>
<dt>Fruits</dt>
<dd>-mangos</dd>
<dt>animal</dt>
<dd>-cows</dd>
</dl>OUTPUT:
Also check out html link and html table
About Author
