HTML Lists – Ordered, Unordered, and Description

ADVERTISEMENT

Lists are super useful in HTML when you want to group related content. Whether it’s steps in a process, bullet points, or definitions—HTML provides three types of lists to help.

🔢 1. Ordered List (<ol>) – Numbered Items

This is used when the order matters, like steps in a recipe or process.

✅ Syntax:

<ol>
  <li>Install Code Editor</li>
  <li>Write HTML</li>
  <li>Save and Open in Browser</li>
</ol>
  • You can change the type of numbering:
<ol type="A"> <!-- A, a, I, i, 1 (default) -->
  <li>Alpha</li>
  <li>Beta</li>
</ol>
  • You can also start from a specific number:
<ol start="5">
  <li>Fifth</li>
  <li>Sixth</li>
</ol>

🔘 2. Unordered List (<ul>) – Bulleted Items

Used when the order doesn’t matter, like a shopping list or checklist.

✅ Syntax:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
  • By default, browsers show bullets.
  • You can change bullet styles via CSS (disc, circle, square).

📚 3. Description List (<dl>) – Terms & Definitions

Perfect for glossaries or definitions, where each term has one or more descriptions.

✅ Syntax:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>
  • <dt> = definition term
  • <dd> = definition description

📌 You can have multiple <dd> tags for one <dt>.

🎨 Nesting Lists

You can also nest lists inside other lists:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

🚨 Best Practices

  • Always use <li> only inside <ol> or <ul>.
  • Don’t use lists just for layout—use CSS for that.
  • Description lists are ideal for FAQs or glossaries.

✅ Summary Table

TagUse Case
<ol>Numbered steps, sequences
<ul>Bullet points, unordered content
<dl>Definitions, FAQs, term/value pairs
<li>List item (inside <ul> or <ol>)
<dt>Term in a description list
<dd>Description of the term

🧪 Try This in Your HTML

<h2>Ordered List Example</h2>
<ol type="I" start="3">
  <li>Start</li>
  <li>Continue</li>
  <li>Finish</li>
</ol>

<h2>Unordered List Example</h2>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Cheese</li>
</ul>

<h2>Description List Example</h2>
<dl>
  <dt>API</dt>
  <dd>Application Programming Interface</dd>

  <dt>UI</dt>
  <dd>User Interface</dd>
  <dd>Visual part of the app</dd>
</dl>

👉 Coming Up Next:

Let’s now move into HTML Links and Navigation—how to create internal, external, anchor, and accessible links.

📚 Next: HTML Links and Navigation

ADVERTISEMENT