Semantik HTML: tegni ma'nosi uchun tanlash va u nimani o'zgartiradi

Qisqacha: Semantik HTML — har bir kontent bo'lagiga uning ma'nosiga mos tegni tanlash: sarlavhaga h2, ro'yxatga ul, tugmaga button. Brauzer har bir tegdan "rol" oladi va sahifaning maxsus daraxtini quradi — ekran o'quvchi, Google, o'qish rejimi va boshqa vositalar aynan shu daraxtni o'qiydi. Faqat div lardan qurilgan sahifa ("div soup") ekranda chiroyli ko'rinishi mumkin, lekin bu vositalar uchun u bo'sh qutilar to'plami.

Bu darsda

• "Semantika" so'zi HTML'da nimani anglatishini aniq ayta olasiz.
• Teglarning yashirin rollarini va accessibility daraxtini tushunasiz.
• Semantik HTML'dan kimlar va qanday foyda ko'rishini sanab bera olasiz.
• "Div soup" sahifani semantik sahifaga aylantirasiz.
• DevTools'da sahifaning accessibility daraxtini tekshirasiz.

Oldin bilishingiz kerak: div va span, Tugma yoki havola.

1. Nega bu kerak?

Bu qismning birinchi darsidan beri bitta g'oyani takrorlab keldik: "tegni ko'rinishga emas, ma'noga qarab tanlang". Sarlavhalar darsida, urg'u teglarida, div va span da, tugma va havolada.

Endi yangi modul boshlanadi — semantika va sahifa tuzilmasi. Bu darsda o'sha g'oyani bir joyga yig'amiz va uning "nega"siga chuqurroq qaraymiz: brauzer ichida aynan nima sodir bo'ladi va ma'noli teg kimga qanday yordam beradi.

2. Semantika nima?

Semantika (semantics) — tilshunoslikda "ma'no" haqidagi fan. HTML'da semantik teg — nomining o'zi ma'noni aytadigan teg:

Semantik bo'lmagan teglar esa hech narsa demaydi: div va span. Ular — bo'sh qutilar.

Semantik HTML — shunchaki "to'g'ri teglar ro'yxatini yodlash" emas. Bu — fikrlash tarzi: har bir element uchun avval "bu nima?" deb so'rash, keyin shunga mos tegni tanlash.

3. Brauzer ichida: rollar va accessibility daraxti

3.1 Har bir tegning yashirin roli

HTML'dan pikselgacha darsida brauzer HTML'dan DOM daraxtini qurishini ko'rgan edik. Aslida u yana bitta daraxt quradi — accessibility daraxti (accessibility tree). Unda har bir muhim element uchun uch narsa yoziladi:

• Rol — bu nima: tugma, havola, sarlavha, ro'yxat.
• Nom — uning nomi: tugma matni, rasmning alt i.
• Holat — hozir qanday: o'chirilgan, tanlangan, ochiq.

Rolni brauzer tegdan oladi:

Ekran o'quvchi, ovozli boshqaruv dasturlari va boshqa yordamchi texnologiyalar sahifani DOM orqali emas, aynan shu daraxt orqali "ko'radi". Bu daraxt qanday tuzilishini Accessibility daraxti darsida chuqur o'rganamiz.

3.2 DevTools'da ko'ring

Chrome DevTools'da accessibility daraxtini ko'rish mumkin:

1. F12 → Elements.
2. Istalgan elementni tanlang va o'ng paneldagi Accessibility yorlig'ini oching. "Role" va "Name" qatorlarini ko'rasiz.
3. Butun daraxt uchun: shu yorliqdagi Enable full-page accessibility tree belgisini yoqing. Elements panelining tepasida kichik tugma paydo bo'ladi — u DOM va accessibility daraxti o'rtasida almashtiradi.

Choyxona saytidagi tugmani tanlang — "Role: button". Endi div ni tanlang — "Role: generic" yoki umuman ro'yxatda yo'q. Farq shu yerda.

Tekshirib ko'ring: <div class="sarlavha">Menyu</div> va <h2>Menyu</h2> — ekranda CSS bilan bir xil ko'rinadi. Accessibility daraxtida ular qanday farq qiladi?

4. Semantikadan kim foyda ko'radi

4.1 Ekran o'quvchi foydalanuvchilari

Bu eng muhim guruh. Semantik sahifada Malika (ko'zi ojiz foydalanuvchi, alt darsida tanishgan edik):

• Sarlavhalar bo'ylab sakraydi va sahifaning tuzilmasini bir necha soniyada biladi.
• "Ro'yxat, 5 ta band" ni eshitib, uni o'qishi yoki o'tkazib yuborishini hal qiladi.
• "Tugma" va "havola" ni farqlaydi — nima sodir bo'lishini oldindan biladi.
• Keyingi darsda ko'radigan sahifa hududlari bo'ylab — menyu, asosiy kontent, pastki qism — bitta tugma bilan o'tadi.

Div soup sahifada esa Malika uchun hammasi bir tekis matn oqimi.

4.2 Qidiruv tizimlari

Google sahifani "ko'zi bilan" emas, kodi bilan o'qiydi. U h1 dan sahifa mavzusini, h2 lardan bo'limlarni, a dan havolalarni, time dan sanani, article dan asosiy maqolani biladi. Semantik sahifani u yaxshiroq tushunadi — demak, to'g'ri qidiruvlarda to'g'ri ko'rsatadi.

4.3 Brauzerlarning "o'qish rejimi"

Firefox, Safari va Chrome'da o'qish rejimi (Reader Mode) bor: reklama, menyu va keraksiz narsalarni olib tashlab, faqat asosiy matnni qulay ko'rinishda qoldiradi. Brauzer asosiy matnni qayerdan topadi? Semantik teglardan: sarlavhalar, paragraflar, article, main. Div soup sahifada o'qish rejimi ko'pincha ishlamaydi yoki keraksiz narsalarni ham ko'rsatadi.

4.4 Boshqa "o'quvchilar"

• Brauzer tarjimoni va ovozli yordamchilar.
• AI yordamchilar — sahifani qisqacha bayon qiladigan yoki savolga javob beradigan vositalar. Ular ham tuzilmani teglardan tushunadi.
• Telegram va boshqa ilovalardagi havola ko'rinishi — sarlavha va rasmni sahifadan oladi.

4.5 Dasturchilar

Semantik kodni o'qish oson. <nav> ni ko'rgan dasturchi darhol biladi: bu menyu. <div class="x7a"> ni ko'rgan dasturchi CSS va JavaScript'ni titkilab chiqishi kerak. Yarim yildan keyin o'z kodingizni o'qiyotgan siz ham shu dasturchisiz.

5. Div soup va uning semantik varianti

5.1 "Div sho'rvasi"

div va span darsida bu atamani ko'rgan edik. Mana choyxona sahifasining bir qismi — butunlay div lardan:

<div class="sahifa-nomi">Choyxona «Bahor»</div>
<div class="menyu-link" onclick="location.href='menyu/'">Menyu</div>
<div class="bolim">
  <div class="bolim-nomi">Bugungi taklif</div>
  <div class="matn">Osh — 35 000 so'm</div>
  <div class="matn">Kabob — 25 000 so'm</div>
  <div class="tugma" onclick="buyurtmaBer()">Buyurtma berish</div>
</div>
<div class="izoh">«Eng mazali osh!» — Malika</div>

CSS bilan bu chiroyli bo'lishi mumkin. Lekin accessibility daraxtida — faqat matn parchalari. Sarlavha yo'q, havola yo'q, tugma yo'q, ro'yxat yo'q, iqtibos yo'q. Klaviatura bilan hech narsani bosib bo'lmaydi.

5.2 Semantik variant

Xuddi shu kontent — bu qismda o'rgangan teglar bilan:

<h1>Choyxona «Bahor»</h1>
<p><a href="menyu/">Menyu</a></p>

<h2>Bugungi taklif</h2>
<ul>
  <li>Osh — 35 000 so'm</li>
  <li>Kabob — 25 000 so'm</li>
</ul>
<button type="button">Buyurtma berish</button>

<figure>
  <blockquote><p>Eng mazali osh!</p></blockquote>
  <figcaption>— Malika</figcaption>
</figure>

Nima o'zgardi:

Kod hatto qisqaroq bo'ldi — va hamma klass nomlari ortiqcha bo'lib qoldi: teglarning o'zi ma'noni aytyapti.

Bo'sh joyni to'ldiring: accessibility daraxtida div ning roli bormi? (ha/yo'q)

6. Qoida: avval HTML, keyin boshqa narsa

Semantika bilan bog'liq eng muhim amaliy qoida:

Kerakli ma'noga ega HTML teg bo'lsa — uni ishlating. Ma'noni boshqa usullar bilan "yasamang".

Masalan, div ni JavaScript va maxsus atributlar bilan "tugma"ga aylantirish mumkin. Lekin buning uchun o'nlab qator kod kerak: fokus, klaviatura, rol, holat. button esa bularning hammasini bepul beradi va sinovdan o'tgan.

Accessibility mutaxassislari buni shunday aytadi: "yomon ARIA'dan ko'ra ARIA'siz yaxshi" (ARIA — HTML'ga qo'shimcha rollar beruvchi atributlar tizimi; uni ARIA asoslari darsida ko'ramiz). Avval to'g'ri HTML teg — faqat u yetmagandagina qo'shimcha vositalar.

7. Semantikani tekshirish

Validator semantikani tekshira olmaydi: div bilan qurilgan sahifa ham "to'g'ri HTML". Shuning uchun boshqa usullar kerak:

• Klaviatura testi. Sichqonchani chetga qo'ying va sahifada faqat Tab, Enter va Space bilan ishlang. Hamma tugma va havolaga yetib borasizmi? Bosiladigan div lar darhol ma'lum bo'ladi.
• Accessibility daraxti (3.2-bo'lim). Sarlavhalar, ro'yxatlar, tugmalar o'z rollari bilan ko'rinishi kerak.
• Lighthouse. Accessibility bo'limi ko'plab muammolarni avtomatik topadi: nomsiz tugmalar, sarlavha tartibi, alt'siz rasmlar.
• CSS'ni o'chirib ko'rish. Sahifa CSS'siz ham tushunarli tuzilgan hujjatdek o'qiladimi? Sarlavhalar sarlavhadek, ro'yxatlar ro'yxatdek ko'rinsa — semantika yaxshi.

8. Ko'p uchraydigan xatolar

8.1 Semantika "keyinroq qo'shiladi"

"Avval dizaynni div lar bilan yasayman, keyin to'g'rilayman" — bu "keyin" deyarli hech qachon kelmaydi. Tuzatish: birinchi qatordan to'g'ri teg. Bu ortiqcha vaqt olmaydi — ko'pincha hatto tezroq.

8.2 Ko'rinish uchun semantik teg

Teskari xato: blockquote ni matnni ichkariga surish uchun, h3 ni kichikroq sarlavha kerak bo'lgani uchun ishlatish. Bu ham semantikani buzadi — faqat boshqa tomondan. Tuzatish: teg — ma'no uchun, ko'rinish — CSS uchun.

8.3 "Semantik" teglarni to'plash

Har bir div ni zo'rlab qandaydir semantik tegga almashtirish ham noto'g'ri. Agar blok haqiqatan faqat CSS uchun guruh bo'lsa, div — to'g'ri tanlov. Semantika — ma'nosi bor joyda ma'noli teg, ma'nosi yo'q joyda div.

9. Mashqlar

1-mashq (oson): Semantik tegni tanlang

1. "Buyurtma berish" (harakat) →
2. Maqola sanasi "27-sentyabr" →
3. Taomlar ro'yxati →

2-mashq (o'rta): Div soup'ni tuzating

<div class="katta">Tadbirlar</div>
<div class="kichik">Osh bayrami</div>
<div>Sana: 5-oktabr</div>
<div class="link" onclick="location.href='osh-bayrami.html'">
  Batafsil
</div>

<h1>Tadbirlar</h1>
<h2>Osh bayrami</h2>
<p>Sana: <time datetime="2026-10-05">5-oktabr</time></p>
<p><a href="osh-bayrami.html">Osh bayrami haqida batafsil</a></p>

3-mashq (qiyin): Saytingizni auditdan o'tkazing

1. Choyxona saytining bosh sahifasida klaviatura testini o'tkazing (7-bo'lim).
2. DevTools'da to'liq accessibility daraxtini yoqing va sahifadagi hamma sarlavha, ro'yxat, tugma va havola o'z roli bilan ko'rinishini tekshiring.
3. Lighthouse'ning Accessibility bo'limini ishga tushiring va natijani yozib oling.
4. Topilgan muammolarni tuzating va Lighthouse'ni qayta ishga tushiring.

10. Real ishda

• Accessibility — qonuniy talab ko'p davlatlarda (Yevropa Ittifoqida 2025-yildan kengaygan). Kompaniyalar auditdan o'tadi va uning birinchi bandi — semantik HTML.
• Freymvorklar div soup'ni osonlashtiradi. React'da (kursda o'rganamiz) hamma narsani div bilan yozish juda qulay va tez — shuning uchun tajribali jamoalarda kod review'da semantikaga alohida e'tibor beriladi.
• SEO mutaxassislari sahifa tuzilmasini birinchi tekshiradi: h1, sarlavhalar daraxti, havolalar.
• Intervyu savoli: "Semantik HTML nima va nega kerak?" — javobingiz: "tegni ma'nosi bo'yicha tanlash; accessibility daraxti, ekran o'quvchi, Google, o'qish rejimi va kodni saqlash uchun".

Xulosa

• Semantik HTML — har bir kontent bo'lagiga ma'nosiga mos teg; div/span — ma'nosiz qutilar.
• Brauzer teglardan rol oladi va accessibility daraxtini quradi: rol, nom, holat.
• Ekran o'quvchi, Google, o'qish rejimi, tarjimon va AI vositalar aynan shu daraxtni o'qiydi.
• Div soup — ekranda chiroyli, vositalar uchun esa bo'sh qutilar.
• Qoida: mos HTML teg bo'lsa — uni ishlating; ma'noni JavaScript va atributlar bilan "yasamang".
• Tekshirish: klaviatura testi, accessibility daraxti, Lighthouse, CSS'siz ko'rinish.

Keyingi dars: Sahifa landmarklari — header, nav, main, aside, footer: sahifani ekran o'quvchi bir tugma bilan sakray oladigan hududlarga bo'lish.

Manbalar

• MDN: "Semantics", "HTML: A good basis for accessibility" — developer.mozilla.org
• W3C WAI: "Using ARIA" (birinchi qoida: native HTML) — w3.org/TR/using-aria
• web.dev: "Semantic HTML" — web.dev/learn/html