Unordered list

An unordered list is used when list items do not have any particular order. An unordered list is created with the <ul> tag. <ul> tag also is a two sided tag and closed with </ul> tag. Like an ordered-list, an item for unordered list is listed with the <li> tag. Suppose now we want to list the five classes in which Tom has received an “A” on mid-term for each class as:

  • Biology
  • Calculus
  • Statistics
  • History
  • English

To create this list, we will list start with the <ul> tag. Next, we will use the <li> tag to list the first item and </li> to end the first item. Similarly, we will create the rest of the list items with the <li> and </li> tag. The following listing shows the code for creating the entire unordered list:

<ul>
<li>Biology</li>
<li>Calculus</li>
<li>Statistics</li>
<li>History</li>
<li>English</li>
</ul>

Change bullet style for an unordered list

Just as you can change the numbering style for an ordered list, you can change the default bullet style for an unordered list with the type attribute. The three possible values for an ordered list include:

  • disc – the default type, represented by a solid circle.
  • square – a solid square.
  • circle – a ring

The following shows examples for each of the type attribute value for an ordered list:

HTML code

<ul type="disc">
<li>Ordered list</li>
<li>Unordered list</li>
<li>Definition list</li>
</ul>

Output

  • Ordered list
  • Unordered list
  • Definition list

HTML code

<ul type="square">
<li>Ordered list</li>
<li>Unordered list</li>
<li>Definition list</li>
</ul>

Output

  • Ordered list
  • Unordered list
  • Definition list

HTM code

<ul type="circle">
<li>Ordered list</li>
<li>Unordered list</li>
<li>Definition list</li>
</ul>

Output

  • Ordered list
  • Unordered list
  • Definition list

You can also change the bullet type for individual list items by setting the type attribute with the <li> tag:

<ul>
<li type="disc">Ordered list</li>
<li type="square">Unordered list</li>
<li type="circle">Definition list</li>
</ul>

That will produce the following:

  • Ordered list
  • Unordered list
  • Definition list