Unordered HTML List | How to Make Unordered list in HTML 5

 

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:

Input | Example

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

OutPut | Result

• Coffee
• Tea
• Milk

Unordered HTML List - Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker:

Value	Description
disc	Sets the list item marker to a bullet (default)
circle	Sets the list item marker to a circle
square	Sets the list item marker to a square
none	The list items will not be marked

Input | Example - DISC

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

OutPut | Result - DISC

• Coffee
• Tea
• Milk

Input | Example - CIRCLE

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

OutPut | Result - CIRCLE

• Coffee
• Tea
• Milk

Input | Example - SQUARE

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

OutPut | Result - SQUARE

• Coffee
• Tea
• Milk

Input | Example - NONE

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

OutPut | Result - NONE

• Coffee
• Tea
• Milk