HTML ro'yxatlar: ul, ol va dl — tartibsiz, tartibli va ta'rif ro'yxati

Qisqacha: Tartib muhim bo'lmagan ro'yxat — ul (menyudagi taomlar), tartib muhim bo'lgan ro'yxat — ol (retsept qadamlari). Har bir band li ichida yoziladi. "Atama — izoh" juftliklari uchun uchinchi turdagi ro'yxat bor: dl, dt va dd. Ro'yxat ichida ro'yxat faqat li ichiga qo'yiladi.

Bu darsda

• ul va ol dan qaysi biri kerakligini bir savol bilan aniqlaysiz.
• ol ning start, reversed, type atributlari va li ning value atributini ishlatasiz.
• Ichma-ich ro'yxatni to'g'ri yozasiz.
• dl, dt va dd bilan lug'at va xususiyatlar ro'yxatini yasaysiz.
• Ro'yxatlardagi tipik xatolarni validator xabarlaridan taniysiz.

Oldin bilishingiz kerak: Sarlavhalar va paragraflar, Emmet.

1. Nega bu kerak?

Internetdagi ro'yxatlarni sanab ko'ring: do'kondagi kategoriyalar, sayt menyusi, retsept qadamlari, "Top-10 taom", FAQ, mahsulot xususiyatlari. Veb-sahifalar ro'yxatlarga to'la.

Bo'sh joylar darsida aytgan edik: ro'yxatni br bilan yozish — xato. Buning o'z teglari bor. Ular uchta afzallik beradi:

1. Brauzer markerlar (• yoki 1, 2, 3) ni o'zi qo'yadi.
2. Ekran o'quvchi "ro'yxat, 5 ta band" deb aytadi. Ko'zi ojiz foydalanuvchi ro'yxat qancha uzunligini oldindan biladi va xohlasa uni o'tkazib yuboradi.
3. CSS bilan ro'yxatni gorizontal menyu, kartochkalar yoki boshqa ko'rinishga aylantirish oson.

2. ul — tartibsiz ro'yxat

ul (unordered list — tartibsiz ro'yxat) — bandlar tartibi muhim bo'lmagan ro'yxat. Har bir band — li (list item — ro'yxat bandi):

<h2>Bugungi salatlar</h2>
<ul>
  <li>Achchiq-chuchuk</li>
  <li>Vitaminli salat</li>
  <li>Toshkent salati</li>
</ul>

Brauzerda:

Bugungi salatlar
  • Achchiq-chuchuk
  • Vitaminli salat
  • Toshkent salati

"Tartibsiz" degani — bandlarni joyini almashtirsangiz, ma'no o'zgarmaydi. Salatlar qaysi tartibda yozilsa ham, menyu baribir o'sha.

Emmet bilan: ul>li*3 — Emmet darsida ko'rgan qisqartma.

3. ol — tartibli ro'yxat

3.1 Tartib muhim bo'lsa

ol (ordered list — tartibli ro'yxat) — bandlar tartibi ma'noning bir qismi. Retseptda qadamlarni almashtirsangiz, osh chiqmaydi:

<h2>Zirvak tayyorlash</h2>
<ol>
  <li>Qozonda yog'ni qizdiring.</li>
  <li>Piyozni qizarguncha qovuring.</li>
  <li>Go'shtni soling.</li>
  <li>Sabzini somon qilib to'g'rab qo'shing.</li>
</ol>

Brauzerda:

Zirvak tayyorlash
  1. Qozonda yog'ni qizdiring.
  2. Piyozni qizarguncha qovuring.
  3. Go'shtni soling.
  4. Sabzini somon qilib to'g'rab qo'shing.

Raqamlarni brauzer o'zi qo'yadi. Yangi qadam qo'shsangiz yoki birini o'chirsangiz, raqamlar avtomatik yangilanadi — qo'lda qayta sanash kerak emas.

3.2 Qaysi birini tanlash? Bitta savol

O'zingizdan so'rang: "Bandlar joyini almashtirsam, ma'no o'zgaradimi?"

• O'zgaradi — ol: qadamlar, reyting, navbat, yo'l ko'rsatmalari.
• O'zgarmaydi — ul: menyu, xususiyatlar, havolalar ro'yxati.

Tekshirib ko'ring: "Eng ko'p sotilgan 5 ta taom" ro'yxati uchun ul mi yoki ol mi?

3.3 ol atributlari

ol raqamlashni boshqaradigan uchta atributga ega:

start foydali, masalan, ro'yxat ikki qismga bo'linganda. Retseptning birinchi qismi tugadi, tushuntirish paragrafi keldi va qadamlar davom etadi:

<ol start="5">
  <li>Guruchni yuvib, ustidan tekis soling.</li>
  <li>Suv quyib, damlab qo'ying.</li>
</ol>

Endi raqamlar 5 va 6 dan boshlanadi.

reversed — boolean atribut, "Top-5" kabi kamayib boruvchi reytinglar uchun:

<h2>Haftaning top-3 taomi</h2>
<ol reversed>
  <li>Manti</li>
  <li>Lag'mon</li>
  <li>Osh</li>
</ol>

Brauzerda: "3. Manti", "2. Lag'mon", "1. Osh" — eng kuchlisi oxirida, tomoshabin oxirigacha qiziqib o'qiydi.

type raqam ko'rinishini o'zgartiradi: a — kichik harflar (a, b, c), I — rim raqamlari (I, II, III). Lekin ko'rinish odatda CSS ishi. type ni faqat raqam turi ma'noga ega bo'lganda ishlating. Masalan, shartnoma bandlari: matnda "b) bandiga qarang" deyilsa, "b" harfi o'zgarmasligi kerak.

3.4 li ning value atributi

Bitta bandga aniq raqam berish mumkin. Keyingilar undan davom etadi:

<ol>
  <li>Osh</li>
  <li value="10">Manti</li>
  <li>Somsa</li>
</ol>

Natija: 1. Osh, 10. Manti, 11. Somsa. Bu kam kerak bo'ladi — masalan, raqamlar tashqi tizimdan kelsa (buyurtma raqamlari).

Bo'sh joyni to'ldiring: <ol start="3"> ro'yxatining ikkinchi bandi qaysi raqam bilan chiqadi?

4. Ichma-ich ro'yxat

Menyuda kategoriyalar, ularning ichida taomlar. Bu — ro'yxat ichida ro'yxat:

<ul>
  <li>Issiq taomlar
    <ul>
      <li>Osh</li>
      <li>Lag'mon</li>
    </ul>
  </li>
  <li>Ichimliklar
    <ul>
      <li>Ko'k choy</li>
      <li>Kompot</li>
    </ul>
  </li>
</ul>

Asosiy qoida: ichki ul li ning ichida turadi — "Issiq taomlar" bandining bir qismi sifatida. Ichki ro'yxat otasining bandini "davom ettiradi".

Brauzer ichki ro'yxatni ichkariroq surib, boshqa marker bilan ko'rsatadi (• o'rniga ○). Ichma-ich ul va ol ni aralashtirish ham mumkin: ol qadamlar ichida ul bilan kerakli masalliqlar.

Diqqat: 3–4 darajadan chuqur ro'yxatlar odamni chalkashtiradi. Agar tuzilma shunchalik chuqur bo'lsa, ehtimol ro'yxat emas, alohida sahifalar yoki sarlavhali bo'limlar kerak.

5. dl — ta'rif ro'yxati

5.1 "Atama — izoh" juftliklari

Uchinchi turdagi ro'yxatni ko'p dasturchi bilmaydi, lekin u juda foydali. dl (description list — tavsif ro'yxati) — nom va uning qiymati juftliklari:

• dt (description term) — atama yoki nom.
• dd (description details) — uning izohi yoki qiymati.

Lug'at uchun:

<h2>Choyxona lug'ati</h2>
<dl>
  <dt>Zirvak</dt>
  <dd>Oshning go'sht, piyoz va sabzidan iborat asosi.</dd>
  <dt>Dam</dt>
  <dd>Qozon qopqog'i ostida sekin pishish bosqichi.</dd>
</dl>

Brauzer dd ni biroz ichkariga surib ko'rsatadi:

Zirvak
    Oshning go'sht, piyoz va sabzidan iborat asosi.
Dam
    Qozon qopqog'i ostida sekin pishish bosqichi.

5.2 Xususiyatlar ro'yxati

dl faqat lug'at uchun emas. Har qanday "nom: qiymat" juftliklari — mahsulot xususiyatlari, buyurtma ma'lumotlari:

<h2>Toshkent oshi</h2>
<dl>
  <dt>Narxi</dt>
  <dd>35 000 so'm</dd>
  <dt>Vazni</dt>
  <dd>400 g</dd>
  <dt>Tayyorlash vaqti</dt>
  <dd>15 daqiqa</dd>
</dl>

Onlayn do'konlardagi "Xususiyatlar" jadvalchalari ko'pincha aynan shunday qurilgan.

5.3 Bir nechta dt yoki dd

Bitta izohga bir nechta nom (sinonimlar):

<dl>
  <dt>Manti</dt>
  <dt>Chuchvara</dt>
  <dd>Xamir ichiga qiyma solib pishiriladigan taomlar.</dd>
</dl>

Yoki bitta nomga bir nechta qiymat — masalan, "Mavjud o'lchamlar" uchun ikkita dd: "0,5 porsiya" va "1 porsiya".

5.4 dt va dd ni div ga o'rash

CSS bilan bezash uchun har bir juftlikni div ga o'rashga ruxsat bor. div — ma'nosiz qobiq, uni keyingi darsda ko'ramiz:

<dl>
  <div>
    <dt>Narxi</dt>
    <dd>35 000 so'm</dd>
  </div>
  <div>
    <dt>Vazni</dt>
    <dd>400 g</dd>
  </div>
</dl>

Qoida: yoki hamma juftliklar div ichida, yoki hech biri. Aralashtirsangiz, validator xato beradi.

Tekshirib ko'ring: Kontakt ma'lumotlari: "Telefon: +998 90 000 00 00", "Ish vaqti: 7:00–23:00". Qaysi ro'yxat turi mos keladi?

6. menu — buyruqlar ro'yxati

menu — ul ning maxsus shakli: foydalanuvchi bosadigan buyruqlar (tugmalar) ro'yxati. Masalan, matn muharriridagi asboblar paneli:

<menu>
  <li><button type="button">Nusxalash</button></li>
  <li><button type="button">Qirqish</button></li>
  <li><button type="button">Joylash</button></li>
</menu>

Brauzer menu ni xuddi ul kabi ko'rsatadi. Farq — faqat ma'noda. Amalda menu kam uchraydi. Tugmalardagi type="button" atributi — "bu oddiy tugma" degani, uni Tugmalar va yuborish darsida ko'ramiz.

Diqqat: Nomiga aldanmang: sayt navigatsiya menyusi (Bosh sahifa, Menyu, Aloqa) — menu emas. U havolalar ro'yxati va odatda nav ichidagi ul bilan yoziladi. Buni Havola asoslari va Sahifa landmarklari darslarida ko'ramiz.

7. Ko'p uchraydigan xatolar

7.1 ul ichida li dan boshqa narsa

<ul>
  <p>Salatlar:</p>
  <li>Achchiq-chuchuk</li>
</ul>

Nu HTML Checker:

Error: Element “p” not allowed as child of element “ul” in this context.

Tarjimasi: "Bu kontekstda p elementi ul ning bolasi bo'la olmaydi." ul va ol ning to'g'ridan-to'g'ri bolalari faqat li bo'ladi. Tuzatish: sarlavha yoki izohni ro'yxatdan oldin yozing.

Oddiy matn ham xuddi shunday: <ul>Menyu<li>... → "Text not allowed in element “ul” in this context." ("Bu kontekstda ul ichida matnga ruxsat yo'q.")

7.2 Ichki ro'yxat li dan tashqarida

<ul>
  <li>Issiq taomlar</li>
  <ul>
    <li>Osh</li>
  </ul>
</ul>

Error: Element “ul” not allowed as child of element “ul” in this context.

Tarjimasi: "ul elementi ul ning bevosita bolasi bo'la olmaydi." Ekranda deyarli bir xil ko'rinadi, lekin tuzilma buzilgan: ichki ro'yxat hech bir bandga tegishli emas. Tuzatish: </li> ni ichki ro'yxatdan keyinga ko'chiring (4-bo'limdagi kabi).

7.3 dl da div ni aralashtirish

<dl>
  <div><dt>Osh</dt><dd>Guruchli taom</dd></div>
  <dt>Manti</dt><dd>Xamirli taom</dd>
</dl>

Error: Element “dt” not allowed as child of element “dl” in this context.

Birinchi juftlik div da, ikkinchisi esa yo'q. Tuzatish: ikkinchisini ham div ga o'rang yoki birinchisidan div ni olib tashlang.

7.4 Raqamlarni qo'lda yozish

<ol>
  <li>1. Yog'ni qizdiring.</li>
  <li>2. Piyozni qovuring.</li>
</ol>

Sahifada "1. 1. Yog'ni qizdiring." — raqam ikki marta chiqadi. Tuzatish: raqamlarni olib tashlang — ol ularni o'zi qo'yadi.

8. Mashqlar

1-mashq (oson): Ro'yxat turini tanlang

1. Choyxonaga yo'l ko'rsatmasi: "Metrodan chiqing, o'ngga buriling, 200 m yuring" →
2. Choyxonadagi qulayliklar: Wi-Fi, avtoturargoh, bolalar burchagi →
3. Taomning tarkibi va kaloriyasi: "Kaloriya: 650", "Oqsil: 25 g" →

2-mashq (o'rta): Xatolarni tuzating

<ol>
  Retsept qadamlari:
  <li>1. Suvni qaynating.</li>
  <li>2. Choyni damlang.</li>
</ol>
<ul>
  <li>Ichimliklar</li>
  <ul>
    <li>Choy</li>
  </ul>
</ul>

<p>Retsept qadamlari:</p>
<ol>
  <li>Suvni qaynating.</li>
  <li>Choyni damlang.</li>
</ol>
<ul>
  <li>Ichimliklar
    <ul>
      <li>Choy</li>
    </ul>
  </li>
</ul>

3-mashq (qiyin): Menyu sahifasini ro'yxatlarga o'tkazing

choyxona/menyu.html ni qayta yozing:

1. h2 "Menyu" ostida ichma-ich ul: ikkita kategoriya ("Issiq taomlar", "Ichimliklar"), har birida kamida ikkita taom.
2. h2 "Toshkent oshi" ostida dl: narxi, vazni, tayyorlash vaqti.
3. h2 "Uyda osh damlash" ostida ol: kamida to'rt qadam.
4. npx html-validate menyu.html — xato 0.

Maslahat: Emmet bilan dl>(dt+dd)*3 qisqartmasi uchta juftlikni bir zumda yaratadi.

<h2>Menyu</h2>
<ul>
  <li>Issiq taomlar
    <ul>
      <li>Osh — 35 000 so'm</li>
      <li>Lag'mon — 28 000 so'm</li>
    </ul>
  </li>
  <li>Ichimliklar
    <ul>
      <li>Ko'k choy — 5 000 so'm</li>
      <li>Kompot — 8 000 so'm</li>
    </ul>
  </li>
</ul>

<h2>Toshkent oshi</h2>
<dl>
  <dt>Narxi</dt>
  <dd>35 000 so'm</dd>
  <dt>Vazni</dt>
  <dd>400 g</dd>
  <dt>Tayyorlash vaqti</dt>
  <dd>15 daqiqa</dd>
</dl>

<h2>Uyda osh damlash</h2>
<ol>
  <li>Zirvakni tayyorlang.</li>
  <li>Guruchni yuvib, tekis soling.</li>
  <li>Suv quyib, qaynating.</li>
  <li>Qopqog'ini yopib, 20 daqiqa dam bering.</li>
</ol>

9. Real ishda

• Navigatsiya menyulari. Deyarli har bir saytning yuqori menyusi — nav ichidagi ul va havolalar. CSS uni gorizontal qatorga aylantiradi, markerlarni yashiradi.
• Onlayn do'konlar. Mahsulot kartochkalari ro'yxati ko'pincha ul bo'ladi: har bir mahsulot — li. Ekran o'quvchi "ro'yxat, 24 ta band" deb aytadi va xaridor qancha mahsulot borligini biladi.
• Accessibility nozikligi. Safari brauzeri CSS bilan markerlari olib tashlangan ro'yxatni ba'zan "ro'yxat emas" deb hisoblaydi. Buning yechimini CSS va accessibility darslarida ko'ramiz.
• Hujjatlar. Markdown'dagi - va 1. bilan boshlangan qatorlar (Markdown darsida ko'rgansiz) saytda aynan ul va ol ga aylanadi.

Xulosa

• ul — tartib muhim emas, ol — tartib muhim; bandlar doim li ichida.
• Tanlov savoli: "joyini almashtirsam, ma'no o'zgaradimi?".
• ol atributlari: start, reversed, type (faqat ma'no uchun); li da value.
• Ichki ro'yxat ota bandning li si ichida turadi.
• dl — "nom — qiymat" juftliklari: dt va dd; div ga o'rash — hammasini yoki hech birini.
• menu — buyruqlar (tugmalar) ro'yxati; sayt navigatsiyasi uchun emas.

Keyingi dars: Umumiy konteynerlar: div va span — ma'nosiz, lekin juda ko'p ishlatiladigan ikki "quti" va ularni qachon ishlatish kerak.

Manbalar

• MDN: <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <menu> — developer.mozilla.org
• WHATWG HTML: "Grouping content" — html.spec.whatwg.org