Lists in HTML

Lists in HTML are used to display information in a structured and easy-to-read format. They help in organizing data like items, steps, or points in a web page.

There are mainly 3 types of lists in HTML:

Ordered List (<ol>) → Numbered list
Unordered List (<ul>) → Bulleted list
Definition List (<dl>, <dt>, <dd>) → Term and description list

Also, we can use Nested Lists (a list inside another list).

Ordered List (`<ol>`)

An ordered list is used when the order of items is important, like steps or instructions.

Uses numbers (1, 2, 3 …) by default.
Each item is written inside the <li> tag.

Example:

<h3>Steps to Make Tea</h3>
<ol>
  <li>Boil water</li>
  <li>Add tea leaves</li>
  <li>Pour milk and sugar</li>
  <li>Stir and serve</li>
</ol>

Output :

Notes : -

👉 Attributes:

type → Change numbering style (1, A, a, I, i).
start → Start list with a specific number.

Example with attributes:

<ol type="A" start="3">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Output :

Unordered List (`<ul>`)

An unordered list is used when the order of items does not matter.

It shows items with bullets (•) by default.
Each item is written inside the <li> tag.

Example:

<h3>Web Development Languages</h3>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Python</li>
</ul>

Output :

Notes : -

👉 Attribute:

type → Changes bullet style (disc, circle, square).

Example:

<ul type="square">
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
</ul>

Output :