Abakada HTML Elements Reference: UL Element

asp.net.ph

Displays lines of text as a bulleted list.

HTML 2, 3.2, 4, 4.01, 5

<ul
   compact
   type = disc | circle | square
>

The UL element displays a bulleted unordered list. 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 their order in the list is unimportant.

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.

NOTE: Both start and end tags are required.

Attribute	Value	Description
compact	compact	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>