Lists (ul / ol / dl) — ToolScope Notes

Free PDF of this lesson — save it, print it, revise offline. The video is the same lesson on the Code Scope YouTube channel.

Introduction

Look at any real page and you will find lists everywhere: a shop's product features, a recipe's steps, a college's admission requirements, the menu of a website. Whenever information comes as "some items" or "some steps", it is a list. HTML gives you three list types — bullets, numbers, and word-with-meaning — and choosing the right one takes a single question: does the order matter? (Roman Urdu: Jahan cheezon ki fehrist ho ya marhalon ki tarteeb, wahan list banti hai.)

Key points

HTML has 3 kinds of lists. The right one depends on one question: does the order matter?
<ul> — unordered list. Items get bullets. Use it when order does not matter, like a shopping list.
<ol> — ordered list. Items get numbers automatically. Use it when order matters, like steps of a recipe.
In both <ul> and <ol>, every item is an <li> (list item) tag.
Bonus: the type attribute changes the numbering of an <ol>: type="A" gives A, B, C… type="a" gives a, b, c… type="I" gives Roman numbers I, II, III…
<dl> — description list, for a word and its meaning:(Roman Urdu: dl lafz aur us ki tashreeh ke liye hota hai.) You will meet <dl> in glossaries, FAQ pages and word lists — anywhere a term needs its meaning standing right next to it.
- <dt> = the term (the word).
- <dd> = the description (its meaning).
Quick comparison: ul = bullets, no order · ol = numbers, order matters · dl = term + meaning.
A list can live inside a list item — this is called a nested list (a list inside an <li>).

Code examples

Example 1 — Bullet list and numbered list

<h2>Shopping List</h2>
<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
</ul>

<h2>How to Make Tea</h2>
<ol type="A">
  <li>Boil water</li>
  <li>Add tea leaves</li>
  <li>Pour and serve</li>
</ol>

What it does: The shopping list shows bullets because the order does not matter. The tea steps show A, B, C because the order matters — and the browser adds the letters itself.

What you will see: under "Shopping List", three lines each starting with a round bullet. Under "How to Make Tea", three lines starting with A., B., C. You never typed those bullets or letters — the list tags created them, and if you add a fourth item, it joins the counting on its own.

Example 2 — A description list

<dl>
  <dt>HTML</dt>
  <dd>The language that makes the structure of a web page.</dd>
  <dt>Browser</dt>
  <dd>The app that shows web pages, like Chrome.</dd>
</dl>

What it does: Each <dt> shows a term, and the <dd> under it shows its meaning — like a small dictionary on your page.

What you will see: "HTML" on its own line, its meaning on the next line, pushed a little to the right. Then "Browser" and its meaning the same way — a clean two-word dictionary, no table needed.

Example 3 — A nested list (a list inside a list)

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Mango</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

What it does: The inner <ul> lives inside the "Fruits" <li>, so Apple and Mango become a sub-list of Fruits. The outer list keeps its own items — Fruits and Vegetables — at the first level.

What you will see: a bullet for "Fruits", then two smaller, more indented bullets for Apple and Mango under it, then "Vegetables" back at the first level with the same bullet style as Fruits. Categories inside categories — shops and menus are built exactly like this.

Quick recap

One question chooses the list: does the order matter? No → <ul>. Yes → <ol>. Word + meaning → <dl>.
Every item in <ul> and <ol> is wrapped in <li>.
type changes an <ol>'s counting style: A, a, I — the browser does the counting.
In <dl>: <dt> is the term, <dd> is its description.
A list inside an <li> is a nested list — the way categories and sub-categories are built.

Common mistakes

Writing text directly inside <ul> or <ol> without <li> — list items must always be wrapped in <li> tags.
Swapping <dt> and <dd> — remember: term first (dt), then the description (dd).
Using lines and <br> instead of a list — if it is a list of things or steps, use a list tag. The browser and Google both understand it better.

Practice

Make a page with your daily routine in an <ol> (steps in order), and your hobbies in a <ul>.
Make a small dictionary of 3 computer words (like the example) using <dl>, <dt> and <dd>.