The Speed Coding

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: Use CSS to style 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>

Related Pages

HTML tutorial: HTML Lists

HTML DOM reference: Ul Object

CSS Tutorial: Styling Lists


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 ;
}