HTML List

HTML List

HTML List

HTML list is of two types.

  1. Ordered list

  2. Unordered list

HTML Ordered list

  1. Car
  2. Bike
  3. Bicycle

HTML Ordered list is defined by <ol> tag and inside the <ol> tag, list is defined by <li> tag.

"By default, the ordered list will show in Number type format."

Example:
<ol>
<li>Car</li>
<li>Bike</li>
<li>Bicycle</li>
</ol>
Run Code »

Run the code to see the effect.


HTML Unordered list

  • Car
  • Bike
  • Bicycle

HTML Unordered list is defined by <ul> tag and inside the <ul> tag, list is defined by <li> tag.

"By default, the ordered list will show in Disc type format."

Example:
<ul>
<li>Car</li>
<li>Bike</li>
<li>Bicycle</li>
</ul>
Run Code »

Run the code to see the effect.


HTML List Type Attribute

Type attributes are used to enhance the property of HTML list.

Ordered List Types

Type Description
type="1" The list items start with numbers (default)
type="a" The list items start with lowercase letters
type="A" The list items start with uppercase letters
type="i" The list items start with lowercase roman numbers
type="I" The list items start with uppercase roman numbers
Example:
<ol type="a">
<li>Car</li>
<li>Bike</li>
<li>Bicycle</li>
</ol>
Run Code »

Run the code to see the effect.

Example:
<ol type="A">
<li>Car</li>
<li>Bike</li>
<li>Bicycle</li>
</ol>
Run Code »

Run the code to see the effect.

Example:
<ol type="i">
<li>Car</li>
<li>Bike</li>
<li>Bicycle</li>
</ol>
Run Code »

Run the code to see the effect.

Example:
<ol type="I">
<li>Car</li>
<li>Bike</li>
<li>Bicycle</li>
</ol>
Run Code »

Run the code to see the effect.


Unordered List Types

Type Description
type="disc" The list items start with disc type bullet (default)
type="square" The list items start with circle type bullet
type="circle" The list items start with square type bullet
type="none" The list items will not be marked
Example:
<ul type="square">
<li>Car</li>
<li>Bike</li>
<li>Bicycle</li>
</ul>
Run Code »

Run the code to see the effect.

Example:
<ul type="circle">
<li>Car</li>
<li>Bike</li>
<li>Bicycle</li>
</ul>
Run Code »

Run the code to see the effect.

Example:
<ul type="none">
<li>Car</li>
<li>Bike</li>
<li>Bicycle</li>
</ul>
Run Code »

Run the code to see the effect.


HTML Nested List

In the Nested list, we can put a list inside a list.

Example:
<ul>
<li>First Item</li>
<li>Second Item</li>
<ul>
<li>First Sub Item</li>
<li>Second Sub Item</li>
<li>Third Sub Item</li>
</ul>
<li>Third Item</li>
</ul>
Run Code »

Run the code to see the effect.


HTML List in Hindi

Best Use:360p or more (480p or 720p)