HTML ul tag

Example

An unordered HTML list:

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Definition and Usage

The <ul> tag defines an unordered (bulleted) list.

Use the <ul> tag together with the <li> tag to create unordered lists.

Tip: For ordered lists, use the <ol> tag. 

Browser Support

Element
<ul>	Yes	Yes	Yes	Yes	Yes

Global Attributes

The <ul> tag also supports the Global Attributes in HTML.

Event Attributes

The <ul> tag also supports the Event Attributes in HTML.

More Examples

Example

Set the different list style types (with 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

Expand and reduce line-height in lists (with 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

Create a list inside a list (a nested list):

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

Example

Create a more complex nested list:

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>

Default CSS Settings

Most browsers will display the <ul> element with the following default values:

Example

ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}