码农教程 - 一技在手,衣食无忧! tools

HTML <ul> Tag

❮ Previous Complete HTML Reference Next ❯

Example

An unordered HTML list:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Try it Yourself »

More "Try it Yourself" examples below.

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>
Try it Yourself »

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>
Try it Yourself »

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>
Try it Yourself »

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>
Try it Yourself »

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;
}
Try it Yourself »


❮ Previous Complete HTML Reference Next ❯