HTML <ul> tag
Definition and Usage
<ul>
tags to define an unordered (bulleted) list.
Use <ul>
tags and <li> tags to create an unordered list.
Tip:Use CSS toSet the list style.
Tip:For ordered lists, use <ol> Tag.
See also:
HTML Tutorial:HTML Lists
HTML DOM Reference Manual:Ul Object
CSS Tutorial:Set the style of the list
Instance
Example 1
An unordered HTML list:
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
Example 2
Set different list style types (using CSS):
<ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
Example 3
Expand and shrink line height in the list (using CSS):
<ul style="line-height:180%"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ul style="line-height:80%"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
Example 4
Create another list within the list (nested list):
<ul> <li>Coffee</li> <li>Tea <ul> <li>Pu'er</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>
Example 5
Create a more complex nested list:
<ul> <li>Coffee</li> <li>Tea <ul> <li>Pu'er</li> <li>Green Tea <ul> <li>Bi Luo Chun</li> <li>Dragon Well</li> </ul> </li> </ul> </li> <li>Milk</li> </ul>
Global Attributes
<ul>
The tag also supports Global Attributes in HTML.
event attributes
<ul>
The tag also supports Event Attributes in HTML.
Default CSS Settings
Most browsers will display the following default values <ul>
Element:
ul { display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; }
Browser Support
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Support | Support | Support | Support | Support |