Chapter 8 — Global Atributlar

Ba'zi atributlar deyarli har qanday HTML elementiga qo'llanilishi mumkin — bular "global atributlar" deb ataladi.

---

8.1 id, class, style, title

Example

index.html
HTMLNusxalash
01<div id="unique-box" class="card highlighted" style="color: red;" title="Qo'shimcha ma'lumot">
02  Kontent
03</div>

⚠️ Common Mistake
style atributi orqali inline stil yozish — bu CSS'ning cascade tizimidan foydalanishni qiyinlashtiradi va odatda faqat maxsus, dinamik holatlar uchun (masalan JavaScript orqali) ishlatilishi kerak.

8.2 data-* Atributlari

Example

index.html
HTMLNusxalash
01<button data-product-id="123" data-action="add-to-cart">
02  Savatga qo'shish
03</button>

script.js
JavaScriptNusxalash
01const button = document.querySelector("button");
02console.log(button.dataset.productId); // "123"

8.3 aria-*, tabindex, hidden

Example

index.html
HTMLNusxalash
01<div role="alert" aria-live="polite">Xabar yangilandi</div>
02<button tabindex="0">Fokus olishi mumkin</button>
03<div hidden>Bu element ko'rinmaydi</div>

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Mahsulot ID'sini data-* atributida saqlovchi tugma yarating va uni JavaScript orqali o'qing.

🟡 Exercise 2 — Medium

Task: Custom (semantik bo'lmagan) tugma elementini klaviatura orqali ishlatiladigan qiling (tabindex, role, keyboard event bilan).

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<div style="color: red; font-size: 20px; font-weight: bold;">Xato xabari</div>

Your Task: Bu inline style yondashuvining qanday kamchiliklari bor?

<details> <summary>Solution</summary> Inline style — CSS faylida qayta ishlatib bo'lmaydi, media query bilan birga ishlamaydi (to'g'ridan-to'g'ri), va odatda eng yuqori specificity'ga ega bo'lgani uchun keyinchalik override qilish qiyinlashadi. Yaxshiroq yechim — class va CSS fayl: ```html <div class="error-message">Xato xabari</div> ``` ```css .error-message { color: red; font-size: 20px; font-weight: bold; } ``` </details>

📌 Chapter Summary

Global atributlar (id, class, style, title) — deyarli har qanday elementga qo'llanadi. data-* — moslashtirilgan ma'lumotni saqlaydi. aria-*, tabindex, hidden — accessibility va interaktivlik uchun muhim.

🎯 Key Takeaways

• id — unique, class — qayta ishlatiluvchi
• data-* — JavaScript bilan ishlash uchun standart, semantik usul
• Inline style — cheklangan holatlarda, ehtiyotkorlik bilan ishlatiladi
• tabindex, aria-* — accessibility uchun muhim, lekin semantik elementlar afzal

⚡ Quick Cheat Sheet

index.html
HTMLNusxalash
01<div id="unique" class="reusable" data-id="42" title="Tooltip"></div>
02<div hidden></div>
03<div tabindex="0"></div>

---