Chapter 13 — Suhbatga Tayyorgarlik

Daraja bo'yicha guruhlangan HTML interview savollari — har biri chuqur tushuntirish bilan.

---

13.1 🟢 Beginner Savollar

Savol: <div> va <span> orasidagi farq nima?

<details> <summary>Answer</summary> `<div>` — block-level element (o'z qatorini egallaydi), `<span>` — inline element (faqat kontent kengligini egallaydi). Ikkalasi ham semantik ma'noga ega emas, faqat guruhlash uchun ishlatiladi.

Common Wrong Answer: "Ular bir xil, faqat nomi boshqa" — bu ularning display xatti-harakatidagi asosiy farqni e'tiborsiz qoldiradi.

</details>

13.2 🟡 Intermediate Savollar

Savol: Nega semantik HTML accessibility uchun muhim?

<details> <summary>Answer</summary> Semantik elementlar (`<button>`, `<nav>`, `<header>`) — brauzer va ekran o'quvchilarga elementning vazifasi haqida avtomatik ma'lumot beradi (rol, klaviatura ishlovi, fokus), bu `<div>`/`<span>` bilan qo'lda qayta yaratilishi kerak bo'lgan ko'p narsani "bepul" beradi.

Common Wrong Answer: "Semantik HTML faqat SEO uchun muhim" — bu accessibility jihatini e'tiborsiz qoldiradi, aslida ikkalasi ham muhim.

</details>

13.3 🔴 Advanced Savollar

Savol: target="_blank" ishlatilganda nima uchun rel="noopener noreferrer" ham qo'shish tavsiya etiladi?

<details> <summary>Answer</summary> `target="_blank"`siz `rel="noopener"`, yangi ochilgan sahifa `window.opener` orqali asl sahifaning `location`ini o'zgartira olishi mumkin — bu "tabnabbing" deb ataluvchi xavfsizlik zaifligi. `noopener` bu bog'lanishni uzadi, `noreferrer` esa qo'shimcha ravishda referrer ma'lumotini ham yubormaydi.

Common Wrong Answer: "target="_blank" xavfsiz, chunki u faqat yangi tab ochadi" — bu window.opener orqali bo'ladigan xavfni e'tiborsiz qoldiradi.

</details>

13.4 🟣 Senior-Level Savollar

Savol: Katta veb-ilova uchun HTML strukturasini loyihalashda accessibility, SEO va performance orasidagi muvozanatni qanday saqlaysiz?

<details> <summary>Answer</summary> Bu uchtasi ko'pincha bir-birini to'ldiradi: semantik HTML — accessibility'ni ham, SEO'ni ham yaxshilaydi; to'g'ri `alt`/`width`/`height` — accessibility'ni ham, performance (CLS)ni ham yaxshilaydi. Muvozanat — har bir qarorni ("bu element uchun eng semantik teg qaysi?", "bu rasm layout shift keltirib chiqaradimi?") tizimli ravishda ko'rib chiqishni talab qiladi, ular alohida-alohida "qo'shimcha vazifa" emas, HTML yozishning ajralmas qismi sifatida qaralishi kerak.

Common Wrong Answer: "Accessibility va SEO — loyiha oxirida qo'shiladigan qo'shimcha ishlar" — bu ularni HTML yozish jarayonining o'zidan ajratib qo'yadi, bu esa keyinchalik ko'proq qayta ishlashga olib keladi.

</details>

📝 Practice Exercises

🟣 Exercise 1 — Challenge

Task: O'zingiz uchun 5 ta qo'shimcha HTML interview savolini yozing (Question, Answer, Common Wrong Answer bilan).

📌 Chapter Summary

HTML interview savollari — nafaqat teglarni bilishni, balki ularning accessibility, SEO va xavfsizlikka ta'sirini chuqur tushunishni sinaydi.

🎯 Key Takeaways

• Har bir javobda "nega" va "qanday ta'sir qiladi"ni tushuntiring
• Accessibility va SEO — ko'pincha bir-birini to'ldiradi
• Xavfsizlik (masalan tabnabbing) — HTML darajasida ham muhim

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01🟢 Beginner: div vs span, asosiy teglar
02🟡 Intermediate: semantik HTML, formalar
03🔴 Advanced: xavfsizlik, ARIA
04🟣 Senior: arxitektura, muvozanat

---