Home > Abakada: Back to Basics > Language References > HTML Elements > UL Element

---

Displays lines of text as a bulleted list.

HTML 2, 3.2, 4, 4.01, 5

HTML Syntax

<ul compact type = disc | circle | square>
   <li> ... </li>
</ul>

NOTE: Both start and end tags are required.

The <ul> element represents a list of items, where the order of the items is not important.

The element is used with one or more <li> elements to designate the individual list items.

The <ul> element is for grouping a collection of items that do not have a numerical ordering, or where changing the order would not materially change the meaning of the document.

To display an ordered list, see the <ol> element.

Both the <ul> and <ol> elements may be nested as needed. Moreover, the nested lists may alternate between <ul> and <ol> without restriction.

Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle, or a square.

The default bullet style is determined by the browser, but authors can use the element’s type attribute to change the list’s bullet style.

The <ul> element supports the following attributes, in addition to global attributes common to all HTML elements.

Attribute	Value	Description
compact	compact	This Boolean attribute specifies that the list should be rendered in a compact style.
type	circle | disc | square	Defines the shape of the bullets used for each list item.

The following shows a basic example of using the <ul> element.

<p>To create an unordered list.
<ul>
   <li>Mark the start of the list with the UL tag
   <li>Mark the beginning of each list item with the LI tag
   <li>Mark the end of the unordered list.
</ul>

which would render on a Web page as

To create an unordered list.

• Mark the start of the list with the UL tag
• Mark the beginning of each list item with the LI tag
• Mark the end of the unordered list.

The following shows the effect of nested <ul> elements.

<p>I am fortunate to have visited the following places:
<ul>
   <li>Belgium
   <ul>
      <li>Brussels
   </ul>
   <li>Denmark
   <ul>
      <li>Copenhagen
   </ul>
   <li>France
   <ul>
      <li>Paris
   </ul>
   <li>Germany
   <ul>
      <li>Dusseldorf
      <li>Frankfurt
   </ul>
   <li>Sweden
   <ul>
      <li>Stockholm
   </ul>
</ul>

which would render as

I am fortunate to have visited the following places:

• Belgium
  • Brussels
• Denmark
  • Copenhagen
• France
  • Paris
• Germany
  • Dusseldorf
  • Frankfurt
• Sweden
  • Stockholm

• 4.4.6 The ul element

DIR   LI   MENU   OL   Using Lists in HTML