Different Types of HTML Lists

HTML allows us to change the appearance of lists using the type attribute (basic level) or CSS (modern way).

Output:

Unordered List Types

Disc (default) Circle Square
HTML 

  <ul type="disc">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  
  <ul type="circle">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  
  <ul type="square">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>

Ordered List Types

Numbers (default)
  1. Wake Up
  2. Study
  3. Sleep
Uppercase Letters
  1. Wake Up
  2. Study
  3. Sleep
Lowercase Letters
  1. Wake Up
  2. Study
  3. Sleep
Roman Numbers (Uppercase)
  1. Wake Up
  2. Study
  3. Sleep
Roman Numbers (Lowercase)
  1. Wake Up
  2. Study
  3. Sleep
HTML 

<ol type="1">
  <li>Wake Up</li>
  <li>Study</li>
  <li>Sleep</li>
</ol>

<ol type="A">
  <li>Wake Up</li>
  <li>Study</li>
  <li>Sleep</li>
</ol>

<ol type="a">
  <li>Wake Up</li>
  <li>Study</li>
  <li>Sleep</li>
</ol>

<ol type="I">
  <li>Wake Up</li>
  <li>Study</li>
  <li>Sleep</li>
</ol>

<ol type="i">
  <li>Wake Up</li>
  <li>Study</li>
  <li>Sleep</li>
</ol>