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
HTML beginners tutorial !!!
Click to Learn More about – HTML Tutorial for beginners
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 :
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 :
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 :
<ul> Tag Attributes
HTML <ul> tag support following specific attributes.
| Sno | Attributes | Value | Description |
|---|---|---|---|
| 1 | compact | compact | Specifies the list should be render compact view. |
| 2 | type | disc square circle | Specifies the style of the bullet. |
Global Attributes
HTML <ul> tag support following global attributes.
| Sno | Attributes | Value | Description |
|---|---|---|---|
| 1 | id | unique_name | Declared unique id for an element. |
| 2 | class | class_name | Declared one or more classnames for an element. |
| 3 | style | styles | CSS inline styles specify an element. |
| 4 | title | title | Specify extra details of element contain, this will display as a “tooltip” for an elements. |
Event Attributes
HTML <ul> tag support following event attributes.
| Sno | Attributes | Value | Description |
|---|---|---|---|
| 1 | onfocus | script | element gets focus on object when script tobe run. |
| 2 | onblur | script | element lose the focus on object when scrip tobe run. |
| 3 | onabort | script | element gets aborted on object when script tobe run. |
| 4 | onchange | script | element gets anytime change on object when script tobe run. |
| 5 | onbeforeunload | script | element gets unloaded on object when scrip tobe run. |
| 6 | onclick | script | clicked on object when script tobe run. |
| 7 | ondblclick | script | double click on object when script tobe run. |
| 8 | onkeydown | script | key is pressed when script tobe run. |
| 9 | onkeypress | script | key is pressed over element then released when script tobe run. |
| 10 | onkeyup | script | key is released over element when script tobe run. |
| 11 | onmousedown | script | mouse button was pressed over an element when script tobe run. |
| 12 | onmouseout | script | mouse pointer release over an element when script tobe run. |
| 13 | onmousemove | script | run mouse pointer moved when script tobe run. |
| 14 | onmouseover | script | run mouse pointer move over when script tobe run. |
| 15 | onmouseup | script | mouse button is released when script tobe run. |
| 16 | onreset | script | form has been reset when script tobe run. |
| 17 | onselect | script | Select some content when script tobe run. |
| 18 | onsubmit | script | form has been submitted when script tobe run. |
| 19 | onload | script | object has load when script tobe run. |
| 20 | onchange | script | allow to change the object when script tobe run. |
| 21 | onunload | script | unload to the browser window when script tobe run. |
| 22 | ondrag | script | element being dragged when script tobe run. |
| 23 | ondragend | script | element being stop dragged when script tobe run. |
| 24 | ondragenter | script | element being go target dragged when script tobe run. |
| 25 | ondragleave | script | element being leave to target dragged when script tobe run. |
| 26 | ondragover | script | element being over to target dragged when script tobe run. |
| 27 | ondragstart | script | element being start dragged when script tobe run. |
| 28 | ondrop | script | element being dropped when script tobe run. |
| 29 | onerror | script | element error occurs when script tobe run. |
| 30 | onmessage | script | element message display when script tobe run. |
| 31 | onerror | script | element error occurs when script tobe run. |
| 32 | onmousewheel | script | mouse wheel will be rotate when script tobe run. |
| 33 | onscroll | script | scrollbar is scroll when script tobe run. |
| 34 | onresize | script | element should be resize when script tobe run. |
| 35 | onselect | script | all element content selected when script tobe run. |
| 36 | onstorage | script | element should be store in target when script tobe run. |
Browser Compatibility
| Sno | Browser | Support |
| 1 | Chrome | Yes |
| 2 | Firefox | Yes |
| 3 | Edge | Yes |
| 4 | Opera | Yes |
| 5 | Safari | Yes |
| 6 | Internet Explorer | Yes |