Chapter 2 — Ro'yxatlar

Ro'yxatlar — menyu, qadamlar, terminlar kabi ko'plab UI qismlarining semantik asosi.

---

2.1 Unordered va Ordered Lists

Example

index.html
HTMLNusxalash
01<ul>
02  <li>Olma</li>
03  <li>Banan</li>
04</ul>
05 
06<ol>
07  <li>Birinchi qadam</li>
08  <li>Ikkinchi qadam</li>
09</ol>

2.2 Description Lists

Example

index.html
HTMLNusxalash
01<dl>
02  <dt>HTML</dt>
03  <dd>HyperText Markup Language — veb-sahifa strukturasi uchun til.</dd>
04  <dt>CSS</dt>
05  <dd>Cascading Style Sheets — veb-sahifa ko'rinishini boshqaruvchi til.</dd>
06</dl>

2.3 Nested Lists va Real-World Navigation Menu

Example

index.html
HTMLNusxalash
01<nav>
02  <ul>
03    <li><a href="/">Bosh sahifa</a></li>
04    <li>
05      <a href="/products">Mahsulotlar</a>
06      <ul>
07        <li><a href="/products/new">Yangi</a></li>
08        <li><a href="/products/sale">Chegirmada</a></li>
09      </ul>
10    </li>
11  </ul>
12</nav>

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Kunlik vazifalar ro'yxatini <ul> bilan yarating.

🟡 Exercise 2 — Medium

Task: Ikki darajali (asosiy va sub-menyu) navigatsiya menyusini semantik HTML bilan yarating.

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<div>
02  <span>Olma</span>
03  <span>Banan</span>
04</div>

Your Task: Bu — ro'yxat, lekin semantik jihatdan to'g'ri emas. Nega, va qanday tuzatish kerak?

<details> <summary>Solution</summary> `<div>` va `<span>` — hech qanday semantik ma'noga ega emas, ekran o'quvchi buni "ro'yxat" deb aniqlay olmaydi. To'g'ri struktura: ```html <ul> <li>Olma</li> <li>Banan</li> </ul> ``` </details>

📌 Chapter Summary

<ul> — tartibsiz, <ol> — tartibli ro'yxat. <dl>/<dt>/<dd> — termin-tavsif juftliklari uchun. Ichma-ich ro'yxatlar — <li> ichiga joylashtiriladi. Navigatsiya menyulari semantik jihatdan <ul> orqali qurilishi tavsiya etiladi.

🎯 Key Takeaways

• Tartib muhim bo'lsa <ol>, bo'lmasa <ul>
• <dl> — lug'at/FAQ kabi juftlik ma'lumot uchun
• Semantik ro'yxatlar — <div>/<span>dan ko'ra accessibility uchun yaxshiroq

⚡ Quick Cheat Sheet

index.html
HTMLNusxalash
01<ul><li>Item</li></ul>
02<ol><li>Step</li></ol>
03<dl><dt>Term</dt><dd>Definition</dd></dl>

---