Ordered Unordered Lists in Html | learn 2 Types of lists in html easy
today we will see Ordered Unordered Lists in Html
Creating a list in HTMLis very easy. I hope you will read this article till the end and learn how to make a list. So let’s see how we can create a list in HTML
lets see
Ordered Unordered Lists in Html
First of all
What are HTML lists?
First of all let us know what is html list. When we set some data in sequence then we can also create a list by using HTML tag.
How many types of HTML lists are there?
So let’s now know how many types of html list are there and how many ways we can create a html list.
So there are total three types of lists in HTML
HTML list types :
- <ul> : UL list means unordered list and is known as bulleted list.
- <ol> : OL list means ordered list and it is known as numbered list.
- <dl> : DL list means Description list and it is known as Definition list.
HTML Unordered List
An unordered list is used more in creating a HTML list. Which gives us default small black color marks called bullets hence this list is also called bullets list.
An unordered list is started with a <ul> tag. and the <li> tag is used inside the ul tag. So let us understand unordered list with an example
Example :
<!DOCTYPE html>
<html>
<head> </head>
<body>
<p>Ordered Unordered Lists in Html</p>
<ul>
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
</ul>
</body>
</html>Output :
HTML Unordered List or Bulleted List
- Mango
- Apple
- Banana
So we have seen in the above example that we have used <ul> tag first. And then used the <li> tag to write the name inside it and you can also see its output.
And you can also replace the small black colored caps. for that we can use list-stille-tipe to give the style. so let’s understand by example
Example 2 :
<!DOCTYPE html>
<html>
<head> </head>
<body>
<p>HTML Unordered List or Bulleted List</p>
<ul style="list-style-type: square;">
<li>Banana</li>
<li>Apple</li>
<li>Mango</li>
</ul>
</body>
</html>Output :
HTML Unordered List or Bulleted List
- Mango
- Apple
- Banana
So we saw in the second example that the small black dots replaced the secure function. So similarly we can give it in different list-style-type
HTML Ordered List
Using an ordered list assigns a number to the list. An ordered list is started with a <ol> tag. and the <li> tag is used inside the ol tag. So let us understand ordered list with an example.
Example :
<!DOCTYPE html>
<html>
<head> </head>
<body>
<p>Ordered List or Numbered List (ol)</p>
<ol>
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
</ol>
</body>
</html>Output :
Ordered List or Numbered List (ol)
- Mango
- Apple
- Banana
So in above example we used <ol> tag and you can see the output
Read — How do I display HTML tags in HTML?
Different Types of Ordered Lists in HTML
We can type <ol> tags. Let’s see by example.
Example : Type = “i”
<!DOCTYPE html>
<html>
<head> </head>
<body>
<p>Ordered List type i (ol) - Ordered Unordered Lists in Html</p>
<ol type="i">
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
</ol>
</body>
</html>Output :
Ordered List type A (ol)
- Mango
- Apple
- Banana
Example2 : Type = “A”
<!DOCTYPE html>
<html>
<head> </head>
<body>
<p>Ordered List type A (ol) - Ordered Unordered Lists in Html</p>
<ol type="A">
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
</ol>
</body>
</html>Output :
Ordered List type A (ol)
- Mango
- Apple
- Banana
Example 3 : Type = “a”
<!DOCTYPE html>
<html>
<head> </head>
<body>
<p>Ordered List type A (ol) - Ordered Unordered Lists in Html</p>
<ol type="a">
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
</ol>
</body>
</html>Output :
Ordered List type a (ol)
- Mango
- Apple
- Banana
So in all the above three examples we have given <ol> different types and you can see its output as well
HTML Description Lists
A description list serves to provide a description of the data. <dl> tag is used for description list.the description list starts with the <dl> tag and uses two tags within it. The first tag is the <dt> tag which gives the definition term and the second tag is the <dd> tag which gives the definition description.
So let us understand description lists with an example
Example :
<!DOCTYPE html>
<html>
<head> </head>
<body>
<p>HTML Description List or Definition List - Ordered Unordered Lists in Html</p>
<dl>
<dt>mango</dt>
<dd>- Mango is the king of fruits</dd>
<dt>banana</dt>
<dd>- Bananas provide protein</dd>
</dl>
</body>
</html>Output :
HTML Description List or Definition List
mango — Mango is the king of fruits banana — Bananas provide protein