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

Share:


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:

ValueDescription
discSets the list item marker to a bullet (default)
circleSets the list item marker to a circle
squareSets the list item marker to a square
noneThe 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


No comments

Sponsored

Search This Blog