Semantik HTML: to‘g‘ri teglar qidiruv tizimiga qanday yordam beradi

Brauzerda bir xil ko‘rinadigan ikki sahifa ichkaridan butunlay farq qilishi mumkin. Birida hammasi div bloklaridan iborat, boshqasida har bir qism o‘z vazifasiga mos teg bilan belgilangan: sarlavha — sarlavha tegi, ro‘yxat — ro‘yxat, navigatsiya — nav. Ikkinchisi semantik HTML deyiladi.

Nima uchun bu muhim

Qidiruv roboti sahifani ko‘z bilan ko‘rmaydi, kod orqali o‘qiydi. Semantik teglar unga sahifa tuzilmasini aytadi: asosiy kontent qayerda, menyu qayerda, sarlavhalar qanday ierarxiyada. Ekran o‘quvchi dasturlar bilan ishlaydigan ko‘zi ojiz foydalanuvchilar uchun ham xuddi shu tuzilma muhim. Semantik vyorstka bir vaqtda ikki vazifani hal qiladi.

Sahifa qismlari

• header — sahifa yoki bo‘lim boshi: logotip, menyu
• nav — asosiy navigatsiya bloklari
• main — sahifaning asosiy kontenti, bitta
• article — mustaqil material: maqola, tovar kartochkasi, sharh
• section — mavzu bo‘yicha qism, odatda o‘z sarlavhasi bilan
• aside — qo‘shimcha ma’lumot: yon panel, bog‘liq maqolalar
• footer — pastki qism: kontaktlar, huquqiy ma’lumot

Bu teglar reytingni bevosita oshirmaydi, lekin robotga asosiy kontentni menyu va futerdan ajratishni osonlashtiradi.

Sarlavhalar ierarxiyasi

• Bitta H1 — sahifaning asosiy mavzusi
• H2 — asosiy bo‘limlar
• H3 — bo‘limlar ichidagi kichik qismlar

Darajalarni dizayn uchun emas, mazmun uchun tanlang. Agar kichik shrift kerak bo‘lsa, buni CSS bilan qiling, H2 o‘rniga H5 qo‘yib emas. Tipik xato: futer va yon paneldagi «Kontaktlar», «Kategoriyalar» kabi yozuvlar H2 bilan belgilangan va sahifa tuzilmasini buzadi.

Matn elementlari

• Ro‘yxatlar uchun ul va ol, chiziqcha yoki br bilan ajratilgan qatorlar emas
• Jadval ma’lumotlari uchun table, sarlavha kataklari bilan
• Muhim iboralar uchun strong, faqat dizayn uchun emas
• Iqtiboslar uchun blockquote
• Rasm va uning izohi uchun figure va figcaption

Ro‘yxatlar va jadvallar ayniqsa muhim: qidiruv tizimlari ulardan natijalardagi qisqa javoblar uchun foydalanishi mumkin.

Havolalar va tugmalar

Havola — a tegi href atributi bilan. Agar navigatsiya faqat JavaScript orqali div yoki span bosilganda ishlasa, robot bu havolalarni ko‘rmaydi va ular orqali sahifalarni topmaydi. Tugma (button) esa harakat uchun: forma yuborish, oynani ochish. Ularni almashtirib yubormang.

Til va boshqa atributlar

html tegidagi lang atributi sahifa tilini bildiradi: o‘zbekcha sahifa uchun uz, ruscha uchun ru. Rasmlar uchun alt matni, formalardagi maydonlar uchun label — bular ham semantikaning bir qismi.

Qanday tekshirish

• Brauzerda sahifani CSS’siz ko‘ring yoki «o‘qish rejimi»ni yoqing — tuzilma tushunarli bo‘lib qoladimi
• Sarlavhalar tuzilmasini ko‘rsatuvchi kengaytmalar H1–H6 ro‘yxatini beradi
• Lighthouse’ning qulaylik (accessibility) bo‘limi ko‘p semantik xatolarni topadi

Qayerdan boshlash

Har bir sahifani qayta yozish shart emas. Shablonlardan boshlang: sahifa sarlavhasi, menyu, asosiy kontent bloki, futer. Shablon bir marta tuzatilsa, natija butun saytga tarqaladi.