What is an Unordered List in HTML ?
It is a collection of related items which have no special order or sequence.
Unordered List do not need to display items in any particular order.
What are the attributes in <ul> tag ?
There are 4 types of attributes in <ul> tag.
1. disc
2. circle
3. square
4. none
1. Simple Unordered list
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
</head>
<body>
<ul>
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ul>
</body>
</html>
Output :
HTML program coding !!!
Click to Learn More about – HTML Tutorial for beginners
2. Nested Unordered list
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
</head>
<body>
<ul>
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<ul>
<li>Apple</li>
<li>Orange</li>
<ul>
<li>Red</li>
<li>Green</li>
<li>Black</li>
<li>White</li>
</ul>
<li>Papaya</li>
<li>Banana</li>
</ul>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ul>
</body>
</html>
Output :
3. Unordered list with inline style.
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
</head>
<body>
<ul style="color:blue">
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ul>
</body>
</html>
Output :
4. Unordered list with class
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
<style>
.ul1{
color:red;
}
</style>
</head>
<body>
<ul class="ul1">
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ul>
</body>
</html>
Output :
5. Unordered list with id
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
<style>
#ul1{
color:green;
}
</style>
</head>
<body>
<ul id="ul1">
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ul>
</body>
</html>
Output :
HTML code for creating a website !!!
Click to Learn More about – HTML Tutorial for beginners
6. Unordered list with type disc
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
<style>
#ul1{
color:green;
}
</style>
</head>
<body>
<ul id="ul1" type="disc">
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ul>
</body>
</html>
Output :
7. Unordered list with type circle
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
<style>
#ul1{
color:green;
}
</style>
</head>
<body>
<ul id="ul1" type="circle">
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ul>
</body>
</html>
Output :
8. Unordered list with type square
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
<style>
#ul1{
color:green;
}
</style>
</head>
<body>
<ul id="ul1" type="square">
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ul>
</body>
</html>
Output :
9. Unordered list with type none
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
<style>
#ul1{
color:green;
}
</style>
</head>
<body>
<ul id="ul1" type="none">
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ul>
</body>
</html>
Output :
