Skip to content
Takkatho University Takkatho University တက္ကသိုလ် (Takkatho) - Myanmar Programming Learning Platform
GitHub

HTML Best Practices

သပ်ရပ်ပြီး သုံးစွဲရ လွယ်ကူတဲ့ HTML code တွေ ရေးဖို့ ဒီအချက်တွေကို လိုက်နာပေးပါ။

1. အဓိပ္ပာယ်ရှိတဲ့ Semantic Tag များကို သုံးပါ

Section titled “1. အဓိပ္ပာယ်ရှိတဲ့ Semantic Tag များကို သုံးပါ”
  • <div> နဲ့ <span> လို ယေဘုယျဆန်တဲ့ Tag တွေအစား Semantic tag တွေ (<article>, <section>, <header>, <footer> စသည်) ကို အမြဲ ရွေးချယ်သုံးပါ။
  • Semantic tag တွေက Content ကို အဓိပ္ပာယ်ရှိစေပြီး SEO နဲ့ Accessibility ကို အများကြီး ပိုကောင်းစေပါတယ်။

2. ပုံတွေအတွက် alt Attribute ကို အမြဲ သုံးပါ

Section titled “2. ပုံတွေအတွက် alt Attribute ကို အမြဲ သုံးပါ”
  • alt attribute ကိုသုံးပြီး ပုံအတွက် ဖော်ပြချက်စာသားတစ်ခု အမြဲတမ်း ပေးပါ။ ဒါက Screen Reader တွေအတွက် Accessibility ကို ပိုကောင်းစေသလို၊ SEO အတွက်လည်း များစွာ အထောက်အကူ ပြုပါတယ်။

ဥပမာ -

<img src="logo.png" alt="Company Logo">

3. id Attribute ကို Unique ဖြစ်အောင် သုံးပါ

Section titled “3. id Attribute ကို Unique ဖြစ်အောင် သုံးပါ”
  • id attribute ဟာ Element တစ်ခုစီတိုင်းအတွက် သီးသန့်ဖြစ်ရပါမယ်။ (စာမျက်နှာတစ်ခုမှာ တူညီတဲ့ id နှစ်ခု မရှိရပါဘူး)
  • CSS ဒါမှမဟုတ် JavaScript နဲ့ Element တွေကို သီးသန့် လှမ်းခေါ်ဖို့ အဓိက သုံးပါတယ်။

ဥပမာ -

<p id="unique-paragraph">This is a unique paragraph.</p>

4. Form တွေမှာ ဆက်စပ်တဲ့ Element တွေကို <fieldset> Tag သုံးပြီး အုပ်စုဖွဲ့ပါ

Section titled “4. Form တွေမှာ ဆက်စပ်တဲ့ Element တွေကို <fieldset> Tag သုံးပြီး အုပ်စုဖွဲ့ပါ”
  • Form တွေမှာ Accessibility ပိုကောင်းစေဖို့ ဆက်စပ်တဲ့ Element တွေကို <fieldset> tag သုံးပြီး အုပ်စုဖွဲ့သင့်ပါတယ်။

ဥပမာ -

<fieldset>
  <legend>Personal Information</legend>
  <input type="text" name="name">
  <input type="email" name="email">
</fieldset>

5. Inline Style များကို ရှောင်ကြဉ်ပါ

Section titled “5. Inline Style များကို ရှောင်ကြဉ်ပါ”
  • Inline style (ဥပမာ style="color: red;") တွေ သုံးမယ့်အစား၊ ပြင်ပ CSS Stylesheet ကို သုံးတာက Code တွေကို သပ်သပ်စီ ခွဲခြားထားနိုင်ပြီး ပြုပြင်ထိန်းသိမ်းရ (Maintain) ပိုလွယ်ကူစေပါတယ်။

ဥပမာ(မကောင်း) (Inline Style) -

<p style="color: red;">This text is red.</p>

ဥပမာ(ကောင်း) (External CSS) -

<p class="red-text">This text is red.</p>

CSS file ထဲမှာ:

.red-text {
  color: red;
}
Section titled “6. ရှင်းလင်းပြီး နားလည်လွယ်တဲ့ Link စာသားများ ပေးပါ”
  • “Click Here” လိုမျိုး မရှင်းလင်းတဲ့ Link စာသားတွေကို ရှောင်ပါ။ Link ကို နှိပ်လိုက်ရင် ဘယ်ကို ရောက်သွားမလဲဆိုတာကို ရှင်းရှင်းလင်းလင်း ဖော်ပြနိုင်တဲ့ စာသားမျိုး ဖြစ်သင့်ပါတယ်။

ဥပမာ(မကောင်း) -

<a href="about.html">Click Here</a>

ဥပမာ‌(ကောင်း) -

<a href="about.html">Learn more about our company</a>

7. SEO အတွက် meta Tag များကို သုံးပါ

Section titled “7. SEO အတွက် meta Tag များကို သုံးပါ”

<meta> tag က Search Engine တွေကို Page description, Keywords, Viewport settings လိုမျိုး အရေးကြီးတဲ့ အချက်အလက်တွေ ပေးရာမှာ ကူညီပါတယ်။

ဥပမာ -

<meta name="description" content="Learn HTML basics">
<meta name="keywords" content="HTML, web development, beginner">

အဖြစ်များသော HTML အမှားများ

Section titled “အဖြစ်များသော HTML အမှားများ”

  • Tag များကို မပိတ်မိခြင်း - <p> ဒါမှမဟုတ် <li> လို Tag တွေကို ဖွင့်ပြီးရင် အမြဲတမ်း ပြန်ပိတ်ဖို့ မမေ့ပါနဲ့။

  • ပုံတွေမှာ alt စာသား မပါခြင်း - ပုံတွေအတွက် ဖော်ပြချက် alt text ကို အမြဲ ထည့်ပေးပါ။

  • <div> ကို အလွန်အကျွံ သုံးခြင်း - အရာအားလုံးအတွက် <div> ကိုပဲ အားကိုးမယ့်အစား သင့်တော်တဲ့ Semantic HTML tag တွေကို ရွေးသုံးပါ။

  • လိပ်စာမပါသော Link များ - <a href="#">Click Here</a> လိုမျိုး ဘယ်မှမသွားတဲ့ Link မျိုးတွေကို ရှောင်ပါ။ တကယ်ရှိတဲ့ လိပ်စာကိုပဲ Link ချိတ်ပေးပါ။