Web dasturlarning strukturasini yasayotganda muhim qadamlardan biri to’gri elementlarni tanlash hisoblanadi.
Bazi saytlarga kirib devtoolsni ochib qaralsa asosan
div va span elementlardan tashkil topgan bo’ladi. Balki muallifi HTML semantikasini yaxshi bilmas, balki unga bunday talab ham qoyilmagandir(o’zi bunaqa talab qoyilishiga ehtiyoj bormikin?), lekin bu tashlab o’tib ketiladigan mavzu emas, menimcha.Semantic HTML deb “content parcha”si bilan birga faqat funksionalning ozi emas balki unga tegishli mano/mohiyat (bu yerda osha “content parcha”sining mazkur documentga nisbatan munosabati nazar tutilgan) ham birga kelishiga aytiladi. Aytaylik documentga “Hello World” degan matn bor, agar uni
h1 elementga o’rasak u content bu document uchun birlamchi heading vazifasini bajaradi (Headinglarga tegishli qoidalar bor). Agar bu contentni div elementga o’rasak, bu shunchaki manosiz content bo’ladi.Shu o’rinda aytib o’tishimiz kerak, tag elementlar hech qachon browser ularga bergan default “style”lar bilan tanlanmaydi, chunki “style”lar istalgan vaqtda istalgan shaklda “override” qilinishi mumkin.
Semantic elementlar ishlatishning quyidagi afzalliklari bor:
- Functionality. Togri element bilan togri funksional keladi. Masalan
div yoki spandan to’laqonli button yoki a yasashning imkoni yoq.- Accessibility. Bazi elementlarda imkoniyatlari cheklangan foydalanuvchilar uchun qulayliklar bor. O’rniga
div va span ishlatish ularning sayt bilan muloqotini qiyinlashtiradi.- SEO. Search enginelar togri semantika bilan tuzilgan saytlarni yuqoriroq baholaydi(
divlar o’rniga main, section, aside, nav, header, footer…)- Easy testing. Semantic elementlarni ishlatish elementlarni testlarda togri topib olishni osonlashtiradi va test id (darvoqe, test idlarni ishlatish antipatternligini bilarmidingiz?) larga ehtiyojlarni keskin kamaytiradi.
Savol: ohirgi marta
ul (unordered list) o'rniga qachon ol (ordered list) elementini ishlatgansiz va ularning qanday farqi bor?@dev_thinking_loud