Skip to content
GitHub

Semantic HTML သုံးခြင်းရဲ့ အကျိုးကျေးဇူးများ

Semantic HTML သုံးခြင်းရဲ့ Accessibility အကျိုးကျေးဇူးများ

Section titled “Semantic HTML သုံးခြင်းရဲ့ Accessibility အကျိုးကျေးဇူးများ”

Semantic HTML ကို သုံးတာက screen reader လိုမျိုး အထောက်အကူပြု နည်းပညာတွေအတွက် content ကို ပိုမို နားလည်လွယ်စေတဲ့အတွက် accessibility ကို ပိုကောင်းစေပါတယ်။

Screen Reader အတွက် ဥပမာ -
Screen reader တစ်ခုက page ရဲ့ ခေါင်းပိုင်း (<header>)၊ အဓိကအကြောင်းအရာပိုင်း (<main>) နဲ့ အောက်ခြေပိုင်း (<footer>) ကို အလွယ်တကူ ခွဲခြားသိနိုင်ပါတယ်။ ဒါကြောင့် content တွေကို ပိုပြီး စနစ်တကျ၊ အစီအစဉ်တကျ ဖတ်ပြနိုင်ပါတယ်။

Non-semantic vs Semantic

Semantic HTML အတွက် အလေ့အကျင့်ကောင်းများ

Section titled “Semantic HTML အတွက် အလေ့အကျင့်ကောင်းများ”
1. မှန်ကန်တဲ့ Tag များကို သုံးပါ
Section titled “1. မှန်ကန်တဲ့ Tag များကို သုံးပါ”

content နဲ့ သင့်တော်တဲ့ tag ကိုသုံးပါ (ဥပမာ - blog post အတွက် <article> menu အတွက် <nav>)။

2. <div> ကို အလွန်အကျွံမသုံးပါနဲ့
Section titled “2. <div> ကို အလွန်အကျွံမသုံးပါနဲ့”

<div> က အရာအားလုံးကို ထည့်လို့ရတဲ့ container ဆိုပေမဲ့ နေရာတကာမှာ လျှောက်မသုံးပါနဲ့။ သူ့အစား structure ပိုကျတဲ့ semantic tag တွေကို သုံးပါ။

3. Page Structure ကို စဉ်းစားပါ
Section titled “3. Page Structure ကို စဉ်းစားပါ”

Tag တွေရဲ့ အစီအစဉ်ကို အမြဲတမ်း စဉ်းစားပါ။ ကိုယ့်ရဲ့ page ဟာ <header> (အပေါ်ပိုင်း) ကနေ <main> (အဓိက content) ကိုဖြတ်ပြီး <footer> (အောက်ခြေပိုင်း) မှာ ဆုံးသင့်ပါတယ်။

4. ရှင်းလင်းတဲ့ ခေါင်းစဉ်များ ပေးပါ
Section titled “4. ရှင်းလင်းတဲ့ ခေါင်းစဉ်များ ပေးပါ”

<nav>, <header>, <footer>, ဒါမှမဟုတ် <section> လို tag တွေသုံးတဲ့အခါ အထဲမှာပါတဲ့ content တွေက ရှင်းလင်းပြီး အဓိပ္ပာယ်ရှိနေဖို့ သေချာပါစေ။