HTML ul tag (<ul>) can be used to create unordered list. It can contain multiple list items using tag li (<li>) and it can be styled using css. Also note that there can be nested lists (using ul and/or ol) also.
Attributes
- type (obsolete in HTML5)
- compact (obsolete in HTML5)
CSS properties specific to lists
- list-style
- list-style-image
- list-style-type
- list-style-position
Example – ul tag with default list-style-type
<style>
ul {
background-color: lightgreen;
width: 200px;
}
li {background-color:lightgray;}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>Example – ul tag with circle list-style-type
<style>
ul {
background-color: lightgreen;
width: 200px;
list-style-type: circle;
}
li {background-color:lightgray;}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>Example – ul tag with outside list-style-position
Property list-style-position has default value outside.
<style>
ul {
background-color: lightgreen;
width: 200px;
list-style-position: outside; /* default */
}
li {background-color:lightgray;}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>Example – ul tag with inside list-style-position
<style>
ul {
background-color: lightgreen;
width: 200px;
list-style-position: inside;
}
li {background-color:lightgray;}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>Example – ul tag with reduced left padding
<style>
ul {
background-color: lightgreen;
width: 200px;
list-style-position: outside;
padding: 0 0 0 20px;
}
li {background-color:lightgray;}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>Related
- CSS list-style - shorthand for list marker type, image and position
- CSS list-style-type - specify marker (disc, square, numeric, etc.) for a list
- CSS list-style-position - specify if list markers will be outside or inside
- CSS list-style-image - use image as marker in list
- HTML li tag
- HTML ol tag
