HTML ro'yxatlar (ul, ol, li)

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 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:

<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 guruhdir. Keyinchalik CSS marker ko’rinishini o’zgartirishi yoki butunlay yashirishi mumkin.

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

<!-- 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:

<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.

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:

Kod
<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>
Natija

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:

<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.

Raqamlanishni boshqarish

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

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

reversed atributi raqamlarni kamayib boruvchi tartibda chiqaradi:

<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:

<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:

Kod
<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>

<style>
h3 {
margin: 14px 0 6px;
font-size: 0.9rem;
color: #4338ca;
}
ol { margin: 0; }
li { margin-bottom: 2px; }
</style>
Natija

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:

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

  <dt>CSS</dt>
  <dd>Elementlar ko'rinishi va joylashuvini boshqarish tili.</dd>
</dl>
Kod
<dl>
<dt>HTML</dt>
<dd>Veb-sahifa tuzilishini belgilash tili.</dd>

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

<style>
dt {
font-weight: 700;
color: #3730a3;
}
dd {
margin: 0 0 10px 20px;
color: #334155;
}
</style>
Natija

<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.

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

<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 orqali qator va ustun munosabatiga ega ma’lumotlarni to’g’ri belgilashni o’rganamiz.

Bu dars foydali bo'ldimi?

—
— marta ko'rildi