HTML Lists

List ဆိုတာကတော့ တူညီတဲ့အကြောင်းအရာများကို စုစည်းပြသရန်အတွက် အသုံးများတဲ့ Element တစ်ခုဖြစ်ပါတယ်။

Liat ဟာ အသုံးများ၊ အသုံးဝင်တာကြောင့် သေသေခြာခြာလေး လေ့လာထားသင့်ပါတယ်။

Example for List

An Unordered HTML List:

• Item 1
• Item 2
• Item 3
• Item 4

An Ordered HTML List:

1. First Item
2. Second Item
3. Third Item
4. Fourth Item

Try if Yourslef!

---

Unorder HTML List

Unorder List တစ်ခုကို <ul> tag နဲ့ စတင်ရပါတယ်။ ul ဆိုတာက Unorder List ရဲ့ ကို အတိုကောက်ခေါ်တာပါ။

List ထဲက အချက်အလက်တစ်ခုချင်းစီကိုတော့ <li> tag ထဲမှာ ထည့်ရေးရပါတယ်။

ပုံမှန်အားဖြင့် Unordered List တွေရဲ့ရှေ့မှာ အမဲရောင်အလုံးလေးဖြင့် သတ်မှတ်ပေးပါတယ်။

Unorder List ဆိုတဲ့အတိုင်း List Item တွေကို အရေတွက်အားဖြင့် သတ်မှတ်တာမဟုတ်ဘဲ အမှတ်အသားတစ်ခုခု (ဥပမာ - အမဲရောင်အလုံးလေး) နဲ့ သတ်မှတ်ပေးတာဖြစ်တယ်။

Example Code: Unorder List

1. <ul>

2.      <li> Coffee </li>

3.      <li> Tea </li>

4.      <li> Milk </li>

5. </ul>

Try it Yourself!

---

Order HTML List

အရေအတွက်ကို ရေတွက်ပြီး List လုပ်ချင်တဲ့အချိန်မျိုးတွေမှာ Order List ကိုအသုံးပြုရပါတယ်။

Order List တွေကို <ol> tag နဲ့ စတင်ပြီးတော့ ol ဆိုတာ Order List ရဲ့ အတိုကောက်ပါ။

ပြီးရင်တော့ ထုံးစံအတိုင်း အချက်အလက်တစ်ချင်းစီကို <li> tag ထဲမှာ ထည့်ရေးပါတယ်။

ပုံမှန်အားဖြင့် Order List တွေရဲ့ ရှေ့မှာ 1 , 2 , 3 စတဲ့နံပတ်တွေနဲ့ အမှတ်အသားလုပ်ပေးပါတယ်။

Example Code: Order List

1. <ol>

2.      <li> Coffee </li>

3.      <li> Tea </li>

4.      <li> Milk </li>

5. </ol>

Try it Yourself!

---

Description List

Description List ကတော့ နာမည်အတိုင်းပါဘဲ Main Item တစ်ခုရှိမယ်။ အဲဒီ Item ကိုရှင်းလင်းဖေါ်ပြချက် တစ်ခုရှိမယ်။ အဲဒီပုံစံနဲ့သွားပါတယ်။

Description List ကတော့ အသုံးနည်းပါတယ်။

Description List တွေကို <dl> tag နဲ့စတင်ပြီး dl ဆိုတာက Description List ရဲ့ အတိုကောက်ပါ။

အပေါ်မှာ ပြောခဲ့သလိုဘဲ အဓိကအချက်အလက်ရှိမယ်။ အဲဒိအဓိကအချက်အလက်ကိုတော့ <dt> tag နဲ့သတ်မှတ်နိုင်ပါတယ်။ dt ဆိုတာ Discription Title ပေါ့ဗျာ။

အဲဒီ Item အတွက် ရှင်းလင်းဖေါ်ပြချက်ကိုတော့ <dd> Tag ထဲမှာရေးပါတယ်။ dd ဆိုတာကတော့ Description Data ပေါ့ဗျာ။

Example Code: Description List

1. <dl>

2.      <dt> Coffee </dt>

3.          <dd> Black hot drink </dd>

4.      <dt> Coffee </dt>

5.          <dd> White cold drink </dd>

6. </dl>

Try it Yourself!

---

HTML List Tag

Tag	Description
<ul>	Unorder List သတ်မှတ်ရန်။
<ol>	Order List သတ်မှတ်ရန်။
<li>	အချက်အလက်များ သတ်မှတ်ရန်။
<dl>	Description List သတ်မှတ်ရန်။
<dt>	Description List ရဲ့ အချက်အလက် သတ်မှတ်ရန်။
<dd>	Description List ရဲ့ အချက်အလက်ရဲ့ ရှင်းလင်းဖေါ်ပြချက် သတ်မှတ်ရန်။

HTML Tag များအားလုံးကို ကြည့်ရှုလိုပါက ‌HTML Tag Reference မှာသွားကြည့်နိုင်ပါတယ်။

မရှင်းလင်းတာ၊ မေးမြန်းလိုတာ၊ လိုအပ်တာများရှိရင် Comment မှာရေးခဲ့ပေးပါ။