Unordered List Example

Unordered list creates list with symbols like disc/bullet, circle or square. To create unordered list <ul> tag is used. Create list item using <li> tag. In <ul> tag type attribute is used to create symbol like disc , circle or square with list item. If you not specify type attribute then by default is disc/bullet symbol.

HTML - UL - Unordered List Example

1. <ul> tag without type attribute

<ul>
   <li>Unordered list - 1</li>
   <li>Unordered list - 2</li>
   <li>Unordered list - 3</li>
</ul>

OUTPUT:

• Unordered list - 1
• Unordered list - 2
• Unordered list - 3

2. <ul> tag with type='disc'

<ul type='disc'>
   <li>Unordered list - 1</li>
   <li>Unordered list - 2</li>
   <li>Unordered list - 3</li>
</ul>

OUTPUT:

• Unordered list - 1
• Unordered list - 2
• Unordered list - 3

Note: By default is disc, so first and second example produces same output.

3. <ul> tag with type='circle'

<ul type='circle'>
   <li>Unordered list - 1</li>
   <li>Unordered list - 2</li>
   <li>Unordered list - 3</li>
</ul>

OUTPUT:

• Unordered list - 1
• Unordered list - 2
• Unordered list - 3

4. <ul> tag with type='square'

<ul type='square'>
   <li>Unordered list - 1</li>
   <li>Unordered list - 2</li>
   <li>Unordered list - 3</li>
</ul>

OUTPUT:

• Unordered list - 1
• Unordered list - 2
• Unordered list - 3

5. Nesting of Unordered list

<ul type='circle'>
   <li>Unordered list - 1</li>
   <li>Unordered list - 2</li>
   <ul type='square'>
     <li>Unordered list - 2.1</li>
     <li>Unordered list - 2.2</li>
     <li>Unordered list - 2.3</li>
   </ul>
   <li>Unordered list - 3</li>
</ul>

OUTPUT:

• Unordered list - 1
• Unordered list - 2
• Unordered list - 2.1
• Unordered list - 2.2
• Unordered list - 2.3
• Unordered list - 3

In nesting list, you can use ordered list with unordered list.