# HTML ro'yxatlar (ul, ol, li)

> HTML'da ul, ol va li bilan ro'yxat yaratish, tartibli va tartiblanmagan ro'yxatni tanlash, ichma-ich ro'yxat hamda dl tavsif ro'yxatini ishlatish.

Manba: https://learncode.uz/html-css/royxatlar/
Sana: 2026-05-17

Xaridlar, ish bosqichlari, menyu bandlari, afzalliklar va mundarija — bularning
barchasi o'zaro bog'langan elementlar guruhidir. Ularni alohida paragraflar
bilan emas, HTML ro'yxati bilan belgilash mazmunning tuzilishini aniqroq
ifodalaydi. [Sarlavha va paragrafdan](https://learncode.uz/html-css/sarlavha-paragraf) farqi shundaki,
ro'yxat elementlar orasidagi bog'liqlikni ham bildiradi.

Bu dars yakunida siz:

- `<ul>`, `<ol>` va `<li>` elementlarining vazifasini ajratasiz;
- tartib mazmun uchun muhim yoki muhim emasligiga qarab ro'yxat tanlaysiz;
- ichma-ich ro'yxatni to'g'ri tuzasiz;
- raqamlanishni `start`, `reversed` va `value` bilan boshqarasiz;
- atama va izohlar uchun tavsif ro'yxatini ishlata olasiz.

## Tartiblanmagan ro'yxat — `<ul>`

Elementlarning joylashish tartibi mazmunni o'zgartirmasa, `<ul>` (*unordered
list*) ishlatiladi. Har bir band `<li>` (*list item*) ichida yoziladi:

```html
<h2>Dars uchun kerakli vositalar</h2>
<ul>
  <li>Matn muharriri</li>
  <li>Veb-brauzer</li>
  <li>Internet ulanishi</li>
</ul>
```

Brauzer odatda har band oldiga nuqta qo'yadi. Lekin `<ul>` ning ma'nosi
`nuqtali ko'rinish` emas — **tartibi muhim bo'lmagan guruh**dir. Keyinchalik
CSS marker ko'rinishini o'zgartirishi yoki butunlay yashirishi mumkin.

`<li>` elementlari bevosita `<ul>` yoki `<ol>` ichida bo'lishi kerak:

```html
<!-- To'g'ri -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>
```

## Tartiblangan ro'yxat — `<ol>`

Bandlar ketma-ketligi natijaga ta'sir qilsa, `<ol>` (*ordered list*)
ishlatiladi:

```html
<h2>HTML faylini ochish</h2>
<ol>
  <li>Matn muharririni oching</li>
  <li>HTML kodini yozing</li>
  <li>Faylni index.html nomi bilan saqlang</li>
  <li>Faylni brauzerda oching</li>
</ol>
```

Brauzer bandlarni avtomatik raqamlaydi. Yangi band qo'shilsa yoki bittasi
o'chirilsa, qolgan raqamlarni qo'lda yangilash shart emas.

> **UL yoki OL tanlash savoli**
>
> Bandlar joyini almashtirsangiz ma'no yoki natija buziladimi? Ha bo'lsa,
> `<ol>` ishlating. Yo'q bo'lsa, `<ul>` ko'pincha to'g'ri tanlov bo'ladi.
> Ko'rinishni emas, mazmuniy ketma-ketlikni asos qilib oling.

## Ikki ro'yxatni natijada solishtiring

Quyidagi jonli misolda tartiblanmagan ro'yxat mavzular guruhini, tartiblangan
ro'yxat esa bajarilishi kerak bo'lgan ketma-ket qadamlarni ifodalaydi:

```html
<h1>HTML o'rganish rejasi</h1>

<h2>O'rganiladigan mavzular</h2>
<ul>
  <li>Matn va sarlavhalar</li>
  <li>Havola va rasmlar</li>
  <li>Ro'yxat va jadvallar</li>
</ul>

<h2>Bugungi amaliyot</h2>
<ol>
  <li>index.html faylini yarating</li>
  <li>Kod yozing va saqlang</li>
  <li>Natijani brauzerda tekshiring</li>
</ol>
```

Standart markerlar ro'yxat turini ko'rsatadi, semantik farq esa HTML kodining
o'zida saqlanadi.

## Ichma-ich ro'yxat

Bir band ichida unga tegishli kichik ro'yxat bo'lishi mumkin. Ichki ro'yxat
aynan tegishli `<li>` elementining ichida joylashadi:

```html
<ul>
  <li>
    Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>
    Backend
    <ul>
      <li>Python</li>
      <li>SQL</li>
    </ul>
  </li>
</ul>
```

Bu yerda `HTML`, `CSS` va `JavaScript` bandlari `Frontend` ga tegishli.
Ichki `<ul>` ni ota `<li>` dan tashqariga yozish bu munosabatni buzadi.

> **Ichki ro'yxatning joylashuvi**
>
> `<ul>` yoki `<ol>` ichiga matnni to'g'ridan-to'g'ri yozmang. Ro'yxatdagi har
> bir mazmun `<li>` ichida bo'lishi kerak, ichki ro'yxat ham tegishli `<li>`
> ichiga joylanadi.

## Raqamlanishni boshqarish

Ba'zan tartiblangan ro'yxat 1 dan emas, boshqa sondan boshlanishi kerak.
`start` atributi boshlang'ich raqamni belgilaydi:

```html
<ol start="4">
  <li>Natijani tekshiring</li>
  <li>Xatolarni tuzating</li>
  <li>Loyihani topshiring</li>
</ol>
```

`reversed` atributi raqamlarni kamayib boruvchi tartibda chiqaradi:

```html
<ol reversed>
  <li>Final</li>
  <li>Yarim final</li>
  <li>Saralash bosqichi</li>
</ol>
```

Alohida band raqamini o'zgartirish uchun `li` dagi `value` atributi ishlaydi:

```html
<ol>
  <li>Birinchi band</li>
  <li value="5">Beshinchi band</li>
  <li>Oltinchi band</li>
</ol>
```

Uchala atributni yonma-yon ko'ring — raqamlar qanday o'zgarganiga
e'tibor bering:

```html
<h3>start="4"</h3>
<ol start="4">
  <li>Natijani tekshiring</li>
  <li>Xatolarni tuzating</li>
</ol>

<h3>reversed</h3>
<ol reversed>
  <li>Final</li>
  <li>Yarim final</li>
  <li>Saralash bosqichi</li>
</ol>

<h3>li value="5"</h3>
<ol>
  <li>Birinchi band</li>
  <li value="5">Beshinchi band</li>
  <li>Oltinchi band</li>
</ol>
```

```css
h3 {
  margin: 14px 0 6px;
  font-size: 0.9rem;
  color: #4338ca;
}
ol { margin: 0; }
li { margin-bottom: 2px; }
```

Bu atributlarni faqat mazmundagi haqiqiy raqamlanishni ifodalash uchun
ishlating. Marker shakli yoki rangini o'zgartirish CSS vazifasidir.

## Tavsif ro'yxati — `<dl>`

Atama va unga tegishli izohlar oddiy `ul` yoki `ol` dan farq qiladi. Bunday
juftliklar uchun `<dl>` (*description list*) mavjud:

```html
<dl>
  <dt>HTML</dt>
  <dd>Veb-sahifa tuzilishini belgilash tili.</dd>

  <dt>CSS</dt>
  <dd>Elementlar ko'rinishi va joylashuvini boshqarish tili.</dd>
</dl>
```

```html
<dl>
  <dt>HTML</dt>
  <dd>Veb-sahifa tuzilishini belgilash tili.</dd>

  <dt>CSS</dt>
  <dd>Elementlar ko'rinishi va joylashuvini boshqarish tili.</dd>
</dl>
```

```css
dt {
  font-weight: 700;
  color: #3730a3;
}
dd {
  margin: 0 0 10px 20px;
  color: #334155;
}
```

`<dt>` atama yoki nomni, `<dd>` esa uning tavsifi yoki qiymatini bildiradi.
Lug'at, savol-javob, mahsulot xususiyatlari kabi nom–izoh munosabatlarida
`<dl>` aniq semantika beradi.

## Navigatsiya menyusi ham ro'yxat bo'lishi mumkin

Menyu bir xil vazifadagi havolalar guruhidir. Shu sababli u ko'pincha
ro'yxat sifatida tuziladi:

```html
<nav aria-label="Asosiy navigatsiya">
  <ul>
    <li><a href="/">Bosh sahifa</a></li>
    <li><a href="/darslar">Darslar</a></li>
    <li><a href="/vositalar">Vositalar</a></li>
  </ul>
</nav>
```

CSS keyinchalik nuqtalarni olib tashlab, bandlarni yonma-yon joylashtirishi
mumkin. Lekin HTML'dagi ro'yxat semantikasi saqlanadi.

## Ko'p uchraydigan xatolar

- `<li>` elementini `<ul>` yoki `<ol>` siz ishlatish;
- tartib muhim bo'lsa ham faqat nuqtali ko'rinish yoqqani uchun `<ul>` tanlash;
- ichki ro'yxatni tegishli `<li>` dan tashqarida yozish;
- har bir band boshiga raqamni qo'lda yozib, yana `<ol>` ishlatish;
- elementlar orasidagi oddiy masofa uchun bo'sh `<li>` qo'shish.

## Amaliy mashq

`Frontend o'rganish xaritasi` yarating. Asosiy texnologiyalar uchun `<ul>`,
ularni o'rganish ketma-ketligi uchun `<ol>` ishlating. `HTML` bandi ichiga
sarlavha, havola, rasm va ro'yxat mavzularidan iborat ichki `<ul>` qo'shing.
So'ng tartiblangan ro'yxatni `start="3"` bilan boshlab, natijani tekshiring.

## Qisqacha xulosa

- `<ul>` tartibi mazmun uchun muhim bo'lmagan ro'yxatdir.
- `<ol>` ketma-ketligi muhim bo'lgan ro'yxatdir.
- Har bir band `<li>` ichida yoziladi.
- Ichki ro'yxat tegishli ota `<li>` ichiga joylanadi.
- `start`, `reversed` va `value` raqamlanish ma'nosini boshqaradi.
- `<dl>`, `<dt>` va `<dd>` nom–tavsif juftliklari uchun ishlatiladi.
- Menyu ham semantik ro'yxat sifatida tuzilishi mumkin.

Keyingi darsda [HTML jadvallar](https://learncode.uz/html-css/jadvallar) orqali qator va ustun
munosabatiga ega ma'lumotlarni to'g'ri belgilashni o'rganamiz.