Different Lists in HTML (UL vs OL vs DL) with Video Examples

Hello friend! Today we learn together about Different Lists in HTML: <ul> (Unordered List), <ol> (Ordered List), and <dl> (Definition List) with practical code examples and video tutorials in Khmer.

1. Unordered List (UL) in HTML

Watch video for detail about Unordered List (UL) in HTML:

When you want make list of items where order does not matter (like shopping list or bullet points), you use <ul> tag with <li> (List Item) inside. Read the official MDN Unordered List Documentation. For grid/tabular data instead of lists, see How to Use HTML Table Tag!

Bullet Type Examples

You can change bullet style using type attribute or CSS list-style-type:

<!-- Default disc bullet -->
<ul type="disc">
  <li>Apple</li>
  <li>Banana</li>
</ul>

<!-- Circle bullet -->
<ul type="circle">
  <li>Orange</li>
  <li>Mango</li>
</ul>

<!-- Square bullet -->
<ul type="square">
  <li>Coffee</li>
  <li>Tea</li>
</ul>

<!-- No bullet using CSS -->
<ul style="list-style-type: none">
  <li>Item 1 without bullet</li>
  <li>Item 2 without bullet</li>
</ul>

Rendered Output Preview:

2. Ordered List (OL) in HTML

Watch video for detail about Ordered List (OL) in HTML:

When order of items is very important (like step 1, step 2 recipe or ranking list), you use <ol> tag. Browsers automatically add numbers or letters for you!

Numbering & Attributes Examples

You can use attributes like type, start, reversed, and value:

<!-- Standard numbers (1, 2, 3) -->
<ol type="1">
  <li>First step</li>
  <li>Second step</li>
</ol>

<!-- Capital letters (A, B, C) -->
<ol type="A">
  <li>Option A</li>
  <li>Option B</li>
</ol>

<!-- Roman numerals (I, II, III) -->
<ol type="I">
  <li>Chapter I</li>
  <li>Chapter II</li>
</ol>

<!-- Start from specific number (e.g. start at 5) -->
<ol start="5">
  <li>Item number 5</li>
  <li>Item number 6</li>
</ol>

<!-- Count down reversed list -->
<ol reversed>
  <li>Winner 3</li>
  <li>Winner 2</li>
  <li>Winner 1</li>
</ol>

<!-- Jump number value on specific item -->
<ol>
  <li>First item</li>
  <li value="10">Jump to number 10</li>
  <li>Next item becomes 11</li>
</ol>

Rendered Output Preview:

3. Definition List (DL) in HTML

Watch video for detail about Definition List (DL) in HTML:

A Definition List (or Description List) is used to show terms and their definitions or explanations (like dictionary or FAQ terms):

• <dl> : Definition List container.
• <dt> : Definition Term (the title or name).
• <dd> : Definition Description (the answer or detail).

Definition List Example

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - used for building web page structure.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets - used for styling colors and layouts.</dd>

  <dt>JavaScript</dt>
  <dd>Programming language used for make web page interactive.</dd>
</dl>

Rendered Output Preview:

Tips & Tricks for HTML Lists

Here are some super useful tips and tricks when working with HTML lists in real web projects:

Tip 1: Clean Bullets for Navigation Bar (CSS)

When making navbar links with <ul>, browser adds left space and dot bullets by default. Remove them easily with CSS:

ul.nav-menu {
  list-style-type: none; /* remove bullet dots */
  margin: 0;
  padding: 0; /* remove left indent space */
  display: flex; /* make items horizontal line */
  gap: 16px;
}

Tip 2: Nested Lists (Sub-lists)

You can put another <ul> or <ol> inside an <li> to make sub-menus or nested lists:

<ul>
  <li>Frontend Development
    <ul>
      <li>HTML5</li>
      <li>CSS3</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend Development
    <ul>
      <li>Node.js</li>
      <li>SQL Database</li>
    </ul>
  </li>
</ul>

Rendered Output Preview:

Tip 3: Always Wrap List Items in <li>

Important: Direct children of <ul> and <ol> MUST be <li> tags only. Do not put <div> or <p> directly inside <ul> without wrapping inside <li>!

💡 Next Lesson: Build interactive select menus with Everything about Dropdown List in HTML!