Module 3: HTML Lists
Lesson 1 – HTML Lists
Learning Objectives
By the end of this lesson, students will be able to:
Understand what HTML lists are.
Create Ordered Lists.
Create Unordered Lists.
Build Nested Lists.
Create Description Lists.
Choose the correct list type for different situations.
1. What are HTML Lists?
An HTML List is used to display related items in an organized way.
Lists make webpages easier to read and understand.
Common examples:
Navigation menus
Product categories
Shopping lists
Course outlines
Step-by-step instructions
Definitions and glossaries
HTML provides three types of lists:
List Type Tag
Ordered List <ol>
Unordered List <ul>
Description List <dl>
2. Ordered List (<ol>)
An Ordered List displays items in a numbered sequence.
Syntax
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Output
1. Item 1
2. Item 2
3. Item 3
Example 1 – Favorite Programming Languages
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python</li>
</ol>
Output
1. HTML
2. CSS
3. JavaScript
4. Python
Ordered List Types
Numbers (Default)
<ol type="1">
Output
1. One
2. Two
3. Three
Uppercase Letters
<ol type="A">
Output
A. Apple
B. Banana
C. Orange
Lowercase Letters
<ol type="a">
Output
a. Apple
b. Banana
c. Orange
Uppercase Roman Numerals
<ol type="I">
Output
I. HTML
II. CSS
III. JavaScript
Lowercase Roman Numerals
<ol type="i">
Output
i. HTML
ii. CSS
iii. JavaScript
Start Attribute
Start numbering from a different number.
<ol start="5">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Output
5. HTML
6. CSS
7. JavaScript
3. Unordered List (<ul>)
An Unordered List displays items using bullets.
Syntax
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
Output
Apple
Orange
Banana
Example – Shopping List
<ul>
<li>Rice</li>
<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>
</ul>
Output
Rice
Milk
Eggs
Bread
Bullet Styles
Disc (Default)
<ul type="disc">
HTML
CSS
Circle
<ul type="circle">
○ HTML
○ CSS
Square
<ul type="square">
■ HTML
■ CSS
Note: The type attribute for <ul> is obsolete in HTML5. Modern websites use CSS (list-
style-type) to control bullet styles.
4. Nested List
A Nested List is a list placed inside another list.
It is useful for:
Categories
Menus
Course outlines
Folder structures
Example – Programming Languages
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>PHP</li>
<li>Python</li>
<li>[Link]</li>
</ul>
</li>
</ul>
Output
Frontend
o HTML
o CSS
o JavaScript
Backend
o PHP
o Python
o [Link]
Example – College Departments
<ol>
<li>Computer Science
<ol>
<li>Programming</li>
<li>Database</li>
<li>Networking</li>
</ol>
</li>
<li>Business
<ol>
<li>Accounting</li>
<li>Marketing</li>
</ol>
</li>
</ol>
5. Description List (<dl>)
A Description List is used to display terms and their descriptions.
It uses three tags:
Tag Meaning
<dl> Description List
<dt> Description Term
<dd> Description Details
Syntax
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
Example – Web Technologies
<dl>
<dt>HTML</dt>
<dd>Used to create webpage structure.</dd>
<dt>CSS</dt>
<dd>Used to style webpages.</dd>
<dt>JavaScript</dt>
<dd>Used to add interactivity.</dd>
</dl>
Output
HTML
: Used to create webpage structure.
CSS
: Used to style webpages.
JavaScript
: Used to add interactivity.
6. Comparison of HTML Lists
Feature Ordered List Unordered List Description List
Tag <ol> <ul> <dl>
Items <li> <li> <dt> & <dd>
Numbered ✅ ❌ ❌
Bullets ❌ ✅ ❌
Definitions ❌ ❌ ✅
7. Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Lists</title>
</head>
<body>
<h1>HTML Lists</h1>
<h2>Ordered List</h2>
<ol>
<li>Wake Up</li>
<li>Brush Teeth</li>
<li>Have Breakfast</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
<h2>Nested List</h2>
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>PHP</li>
<li>Python</li>
<li>[Link]</li>
</ul>
</li>
</ul>
<h2>Description List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>Programming language for web pages</dd>
</dl>
</body>
</html>
Best Practices
Use <ol> for steps or sequences.
Use <ul> for unordered collections.
Use nested lists only when they improve readability.
Use <dl> for definitions, FAQs, glossaries, and terminology.
Keep indentation consistent to make nested lists easy to read.
Practical Exercise
Create a webpage named [Link] that contains:
Ordered List
Morning Routine
Wake Up
Exercise
Breakfast
Study
Unordered List
Favorite Foods
Pizza
Burger
Fried Rice
Ice Cream
Nested List
Programming
o Frontend
HTML
CSS
JavaScript
o Backend
PHP
[Link]
Python
Description List
HTML → HyperText Markup Language
CSS → Cascading Style Sheets
JavaScript → Programming language for web development
Summary
In this lesson, you learned:
✅ Ordered Lists (<ol>)
✅ Unordered Lists (<ul>)
✅ Nested Lists
✅ Description Lists (<dl>, <dt>, <dd>)
✅ Different ordered list numbering types
✅ Best practices for organizing information with lists
Assignment
1. Create a file named [Link].
2. Add a heading "My Favorite Things".
3. Create:
o An Ordered List of your daily routine.
o An Unordered List of your favorite movies or games.
o A Nested List showing your study subjects and topics.
o A Description List explaining HTML, CSS, and JavaScript.
4. Save the file and open it using Live Server.
5. Verify that all lists display correctly and are properly indented.
Module 3: HTML Lists (မြန်မာဘာသာဖြင့်
ရှင်းလင်းချက်)
Lesson 1 – HTML Lists
🎯 Learning Objectives (သင်ခန်းစာပြီးဆုံးချိန်တွင်
သိရှိရမည့်အရာများ)
ဒီသင်ခန်းစာပြီးဆုံးသွားတဲ့အခါမှာ သင်ဟာ—
HTML List ဆိုတာဘာလဲဆိုတာ နားလည်မယ်။
Ordered List (<ol>) ကို ရေးနိုင်မယ်။
Unordered List (<ul>) ကို ရေးနိုင်မယ်။
Nested List (List အတွင်း List) ကို ဖန်တီးနိုင်မယ်။
Description List (<dl>) ကို အသုံးပြုနိုင်မယ်။
ဘယ်အခြေအနေမှာ ဘယ် List အမျိုးအစားကို သုံးသင့်လဲဆိုတာ သိရှိလာ
မယ်။
1. HTML List ဆိုတာဘာလဲ?
HTML List ဆိုတာ Web Page ပေါ်မှာ အချက်အလက်တွေကို စနစ်တကျ စုစည်းဖော်ပြ
ဖို့ အသုံးပြုတဲ့ HTML Element တစ်ခုဖြစ်ပါတယ်။
ဥပမာ—
Website Menu
Product Categories
Shopping List
Course Outline
Step by Step Instructions
Dictionary / Glossary
List တွေကို အသုံးပြုခြင်းအားဖြင့် Web Page က ဖတ်ရလွယ်ကူလာပြီး နားလည်ရ
လည်း ပိုလွယ်လာပါတယ်။
HTML မှာ List အမျိုးအစား (၃) မျိုးရှိပါတယ်။
List Tag အသုံးပြုရာ
အစဉ်လိုက် နံပါတ်တပ်ထား
Ordered List <ol>
တဲ့ List
Unordered List <ul> Bullet Point ပါတဲ့ List
List Tag အသုံးပြုရာ
Description List <dl> အဓိပ္ပါယ်ရှင်းတဲ့ List
2. Ordered List (<ol>)
Ordered List ဆိုတာ အစဉ်လိုက် (Sequence) ဖော်ပြရတဲ့ List ဖြစ်ပါတယ်။
Item တိုင်းမှာ Number သို့မဟုတ် Letter တွေ အလိုအလျောက် ထွက်လာပါတယ်။
ဥပမာ—
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Output
1. Item 1
2. Item 2
3. Item 3
<li> ဆိုတာဘာလဲ?
<li> = List Item
List ထဲက Item တစ်ခုချင်းစီကို ကိုယ်စားပြုပါတယ်။
ဥပမာ
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Output
1. HTML
2. CSS
3. JavaScript
Example – Favorite Programming Languages
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python</li>
</ol>
Output
1. HTML
2. CSS
3. JavaScript
4. Python
Ordered List Types
type Attribute ကို အသုံးပြုပြီး Number Format ကို ပြောင်းနိုင်ပါတယ်။
1. Number (Default)
<ol type="1">
Output
1.
2.
3.
2. Uppercase Letter
<ol type="A">
Output
A.
B.
C.
3. Lowercase Letter
<ol type="a">
Output
a.
b.
c.
4. Roman Numerals
<ol type="I">
Output
I.
II.
III.
5. Lowercase Roman
<ol type="i">
Output
i.
ii.
iii.
start Attribute
List ကို 1 ကနေ မစချင်ဘဲ အခြားနံပါတ်ကနေ စချင်ရင် start ကို အသုံးပြုပါတယ်။
<ol start="5">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Output
5. HTML
6. CSS
7. JavaScript
3. Unordered List (<ul>)
Unordered List ဆိုတာ Number မပါဘဲ Bullet Point နဲ့ ဖော်ပြတဲ့ List ဖြစ်ပါတယ်။
Syntax
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
Output
• Apple
• Orange
• Banana
Example
<ul>
<li>Rice</li>
<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>
</ul>
Output
• Rice
• Milk
• Eggs
• Bread
Bullet Types
Disc (Default)
<ul type="disc">
Output
● HTML
● CSS
Circle
<ul type="circle">
Output
○ HTML
○ CSS
Square
<ul type="square">
Output
■ HTML
■ CSS
HTML5 မှာ သိထားသင့်တာ
type="disc"၊ circle၊ square တွေကို HTML5 မှာ Obsolete (အဟောင်း) လို့
သတ်မှတ်ထားပါတယ်။
ယနေ့ခေတ် Website တွေမှာ CSS ကို အသုံးပြုပါတယ်။
ဥပမာ
ul{
list-style-type:square;
}
4. Nested List
Nested List ဆိုတာ List အတွင်းမှာ နောက်ထပ် List ထည့်ထားခြင်း ဖြစ်ပါတယ်။
အသုံးများတဲ့နေရာများ
Website Menu
Categories
Folder Structure
Course Outline
Example
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>PHP</li>
<li>Python</li>
<li>[Link]</li>
</ul>
</li>
</ul>
Output
• Frontend
• HTML
• CSS
• JavaScript
• Backend
• PHP
• Python
• [Link]
Example – College Departments
<ol>
<li>Computer Science
<ol>
<li>Programming</li>
<li>Database</li>
<li>Networking</li>
</ol>
</li>
<li>Business
<ol>
<li>Accounting</li>
<li>Marketing</li>
</ol>
</li>
</ol>
5. Description List (<dl>)
Description List ကို Term (ခေါင်းစဉ်) နဲ့ Description (ရှင်းလင်းချက်) ဖော်ပြ
ဖို့ အသုံးပြုပါတယ်။
Dictionary၊ Glossary၊ FAQ စတာတွေမှာ အသုံးများပါတယ်။
အသုံးပြုတဲ့ Tag များ
Tag အဓိပ္ပါယ်
<dl> Description List
<dt> Description Term (ခေါင်းစဉ်)
<dd>
Description Detail
(ရှင်းလင်းချက်)
Example
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
Output
HTML
HyperText Markup Language
Example
<dl>
<dt>HTML</dt>
<dd>Web Page Structure တည်ဆောက်ရန် အသုံးပြုသည်။</dd>
<dt>CSS</dt>
<dd>Web Page အလှဆင်ရန် အသုံးပြုသည်။</dd>
<dt>JavaScript</dt>
<dd>Web Page ကို Interactive ဖြစ်စေရန် အသုံးပြုသည်။</dd>
</dl>
HTML Lists Comparison
Feature Ordered Unordered Description
Tag <ol> <ul> <dl>
Item Tag <li> <li> <dt> <dd>
Number ✅ ❌ ❌
Bullet ❌ ✅ ❌
Definition ❌ ❌ ✅
ဘယ်အချိန်မှာ ဘယ် List ကို သုံးသင့်
လဲ?
✅ Ordered List (<ol>)
အစဉ်လိုက် လုပ်ဆောင်ရမယ့် အရာများ
ဥပမာ
Cooking Steps
Installation Steps
Morning Routine
Ranking
✅ Unordered List (<ul>)
အစဉ်မလိုတဲ့ အရာများ
ဥပမာ
Shopping List
Favorite Foods
Menu
Categories
✅ Nested List
Parent နှင့် Child အမျိုးအစားတွေ ရှိတဲ့အခါ
ဥပမာ
Programming
Frontend
HTML
CSS
JavaScript
Backend
PHP
[Link]
✅ Description List
Definition ရှင်းပြချင်တဲ့အခါ
ဥပမာ
HTML
HyperText Markup Language
CSS
Cascading Style Sheets
Best Practices (အကောင်းဆုံးအသုံးပြု
နည်း)
✅ အဆင့်လိုက်ဖော်ပြရမယ့်အခါ <ol> ကို သုံးပါ။
✅ အစဉ်မလိုတဲ့ Collection တွေအတွက် <ul> ကို သုံးပါ။
✅ Nested List ကို လိုအပ်တဲ့အခါမှသာ အသုံးပြုပါ။
✅ အဓိပ္ပါယ်ရှင်းပြရန် <dl> ကို အသုံးပြုပါ။
✅ Code ကို Indent (အတွင်းဝင်) ရေးထားပါက ဖတ်ရလွယ်ကူပြီး ပြင်ဆင်ရလည်း
လွယ်ကူပါတယ်။
Summary (အနှစ်ချုပ်)
ဒီသင်ခန်းစာမှာ သင်လေ့လာခဲ့တာတွေက—
✅ HTML List ဆိုတာဘာလဲ
✅ Ordered List (<ol>)
✅ Unordered List (<ul>)
✅ Ordered List ရဲ့ Numbering Types
✅ start Attribute
✅ Nested List
✅ Description List (<dl>, <dt>, <dd>)
✅ List အမျိုးအစားတစ်ခုချင်းစီကို ဘယ်အချိန်မှာ အသုံးပြုသင့်သလဲ
✅ HTML List ရေးသားရာမှာ လိုက်နာသင့်တဲ့ Best Practices
ဒီသင်ခန်းစာပြီးရင် သင်ဟာ Web Page တစ်ခုအတွင်းရှိ အချက်အလက်တွေကို
စနစ်တကျ၊ ဖတ်ရှုရလွယ်ကူအောင် HTML Lists မျိုးစုံကို ယုံကြည်စွာ
အသုံးပြုနိုင်ပါလိမ့်မယ်။