Lists In HTML

Last Updated: 01 Nov 2025

Lists are used to display related items together — like a shopping list, steps, or menu. They make web content more organized and readable.

HTML supports three main types of lists:

  1. Unordered list — items with bullet points (<ul>)
  2. Ordered list — items with numbers (<ol>)
  3. Description/descriptive list — items with titles and descriptions (<dl>)

🗣 Hinglish Tip: List ka matlab simple hai — “ek ke baad ek likhe hue points.” HTML mein ye bullet ya number ke form mein dikhte hain.

Unordered List — <ul>

  • Used when the order doesn’t matter (like a list of fruits or features).
  • It shows bullets (•) by default known as disc.You can change the bullet type using the type attribute.
  • type="disc" | "circle" | "square"
<h2>Fruits</h2>
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
  <li>Orange</li>
</ul>
<ul type="circle">
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
  <li>Orange</li>
</ul>

Ordered List — <ol>

  • Used when the order matters (like a recipe).
  • It shows numbers (1, 2, 3, etc.) by default known as decimal.You can change the number type using the type attribute.
  • type="1" | "A" | "a" | "I" | "i"
  • Pass the start attribute to start the list from a specific number.
<h2>Recipe</h2>
<ol>
  <li>Boil water</li>
  <li>Chop onions</li>
  <li>Chop tomatoes</li>
  <li>Chop garlic</li>
</ol>
<ol type="A" start="5">
  <li>Boil water</li>
  <li>Chop onions</li>
  <li>Chop tomatoes</li>
  <li>Chop garlic</li>
</ol>

Description List — <dl>, <dt>, <dd>

  • Used to show terms with their definitions or meanings.
<h2>HTML Terms</h2>
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>

  <dt>JS</dt>
  <dd>JavaScript — used for interactivity</dd>
</dl>

Nested lists

  • You can put one list inside another — useful for subcategories.
<h2>Programming Languages</h2>
<ul>
  <li>
    Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>
    Backend
    <ul>
      <li>Python</li>
      <li>Node.js</li>
    </ul>
  </li>
</ul>

🧠 Quick Practice

  • Create a file named lists.html.
  • Add a title and three lists about your favorite topic.
  • Exercise
← PreviousNext →