HTML div va span: ma'nosiz konteynerlar, class va id

Qisqacha: div va span — hech qanday ma'noga ega bo'lmagan "qutilar". div bir nechta elementni bitta blokka guruhlaydi va yangi qatordan boshlanadi. span esa matn ichidagi bo'lakni o'raydi va qatorni uzmaydi. Ularga class yoki id berib, CSS va JavaScript'da topamiz. Mos ma'noli teg bo'lsa, doim o'shani tanlang — div va span oxirgi chora.

Bu darsda

• div va span nima uchun kerakligini tushunasiz.
• Block va inline elementlar farqini ko'rsata olasiz.
• class va id atributlarini to'g'ri qo'yasiz va nomlaysiz.
• "Div soup" nima ekanini va undan qanday qochishni bilasiz.
• Nega bosiladigan div yomon g'oya ekanini tushuntira olasiz.

Oldin bilishingiz kerak: Ro'yxatlar, Urg'u va ahamiyat teglari.

1. Nega bu kerak?

Shu paytgacha har bir tegni ma'nosi uchun tanladik: sarlavha — h2, paragraf — p, ro'yxat — ul. Bu qismning asosiy g'oyasi shu edi.

Endi yangi vazifa. Menyuda har bir taom "kartochka" bo'lib turishi kerak: nomi, tavsifi va narxi bitta ramka ichida. Ramka va ranglarni CSS beradi. Lekin CSS'ga "mana shu uchta elementni bitta ramkaga ol" deyish uchun ularni biror narsa bilan o'rab olish kerak.

Bu guruh uchun maxsus ma'noli teg yo'q — u shunchaki "bir-biriga tegishli narsalar qutisi". Aynan shunday holatlar uchun HTML'da ikkita ma'nosiz konteyner bor: div va span.

2. div — blok quti

2.1 Elementlarni guruhlash

div (division — bo'lim) — bir nechta elementni bitta guruhga yig'adigan quti:

<div class="taom-karta">
  <h3>Toshkent oshi</h3>
  <p>Qozonda damlangan, bedana tuxumi bilan.</p>
  <p>35 000 so'm</p>
</div>
<div class="taom-karta">
  <h3>Lag'mon</h3>
  <p>Qo'lda cho'zilgan xamir, go'shtli qayla.</p>
  <p>28 000 so'm</p>
</div>

Brauzerda hozircha hech narsa o'zgarmaydi — div ning o'zi ko'rinmaydi. U faqat tuzilmani belgiladi: har bir taomning uch elementi endi bitta guruh.

class="taom-karta" — guruhning nomi. Keyinchalik CSS'da bitta qoida bilan hamma kartochkalarga ramka berasiz. Qanday bo'lishini ko'z oldingizga keltirish uchun — CSS'dan kichik parcha (uni CSS nima darsida o'rganamiz):

.taom-karta { border: 1px solid gray; padding: 12px; }

2.2 DevTools'da ko'ring

Sahifani oching, F12 bosing va Elements panelida div qatori ustiga sichqonchani olib boring. Brauzer sahifada shu qutini rangli to'rtburchak bilan ko'rsatadi. div — ko'rinmas, lekin haqiqiy to'rtburchak soha.

3. span — matn ichidagi quti

span — gap ichidagi kichik bo'lakni o'raydi. U qatorni uzmaydi, matn ichida oqib turadi:

<p>Toshkent oshi — <span class="narx">35 000 so'm</span></p>

Endi CSS narxni boshqa rangda ko'rsata oladi, gapning qolgan qismi o'zgarmaydi.

span ga lang atributini ham qo'yish mumkin — gap ichidagi chet tilidagi ibora uchun:

<p>Mehmonlarimiz ko'pincha
<span lang="ru">Приятного аппетита!</span> deb xayrlashadi.</p>

Ekran o'quvchi bu iborani ruscha talaffuz bilan o'qiydi.

Tekshirib ko'ring: Nega narxni strong emas, span bilan o'radik?

4. Block va inline

4.1 Farq

div va span bir-biridan ma'noda emas, joylashuvda farq qiladi:

Tajriba:

<div>Birinchi div</div>
<div>Ikkinchi div</div>
<span>Birinchi span</span>
<span>Ikkinchi span</span>

Brauzerda:

Birinchi div
Ikkinchi div
Birinchi span Ikkinchi span

Ikkala div alohida qatorda. Ikkala span esa bitta qatorda yonma-yon.

4.2 Boshqa elementlar ham shunday

Bu qismda o'rgangan hamma teglar ikki guruhning biriga kiradi:

• Block (yangi qatordan): div, p, h1–h6, ul, ol, li, dl, pre, blockquote, hr, address.
• Inline (matn ichida): span, strong, em, b, i, mark, code, kbd, abbr, time, q, a.

Ikki muhim tushuntirish:

1. Bu brauzerning standart ko'rinishi. CSS'da istalgan elementni block yoki inline qilish mumkin. Buni CSS'dagi display xususiyati boshqaradi — CSS qismida ko'ramiz.
2. Ko'rinishdan tashqari, ichiga nima qo'yish qoidasi ham bor: inline element ichiga block element qo'yilmaydi. span ichida div — xato. Nima ichiga nima joylashishini Kontent modeli darsida to'liq o'rganamiz.

5. class va id

div va span ning o'zi ma'nosiz. Ularni bir-biridan ajratish uchun class va id atributlari beriladi. Emmet darsida ularni . va # bilan yozgan edik.

5.1 class — guruh nomi

class — elementlar guruhi nomi. Bir xil klassni istalgancha elementga berish mumkin: hamma taom kartochkalari — taom-karta.

Bitta elementga bir nechta klass — bo'sh joy bilan:

<div class="taom-karta yangi">...</div>

Bu element ikki guruhga ham tegishli: "taom kartochkasi" va "yangi taom".

5.2 id — yagona nom

id — elementning noyob nomi. Bitta sahifada bir xil id faqat bir marta bo'ladi — xuddi pasport raqami kabi:

<div id="kun-taomi" class="taom-karta">
  <h3>Kun taomi: Manti</h3>
</div>

id sahifaning aniq bir joyiga havola qilish uchun juda kerak — buni Sahifa ichidagi havolalar darsida ko'ramiz. JavaScript ham elementni ko'pincha id bo'yicha topadi.

5.3 Nomlash qoidalari

Oxirgi qoida muhim. qizil-matn klassi ertaga dizayner rangni yashilga o'zgartirganda yolg'on bo'lib qoladi. aksiya esa to'g'ri qoladi — rang qanday bo'lmasin.

Klass nomlari katta-kichik harfni farqlaydi: Narx va narx — ikki xil klass. Shuning uchun hamma nomni kichik harfda yozish xatolardan saqlaydi.

Bo'sh joyni to'ldiring: sahifada bir nechta elementga berish mumkin bo'lgan atribut —

6. "Div soup" — div bilan to'ldirilgan sahifa

6.1 Muammo

div qulay: istalgan joyga qo'yish mumkin, hech qanday qoidasi yo'q. Shuning uchun ko'p saytlar deyarli faqat div lardan quriladi:

<div class="sarlavha">Choyxona «Bahor»</div>
<div class="menyu">
  <div class="band">Osh</div>
  <div class="band">Lag'mon</div>
</div>
<div class="matn">Har kuni ochiqmiz.</div>

Bu "div soup" ("div sho'rvasi") deyiladi. Ekranda CSS yordamida hammasi chiroyli ko'rinishi mumkin. Lekin:

• Google sarlavhani sarlavha deb bilmaydi.
• Ekran o'quvchi "ro'yxat, 2 ta band" deb aytmaydi — oddiy matn deb o'qiydi.
• Kod o'quvchi dasturchi faqat klass nomlaridan taxmin qiladi.

To'g'risi — ma'noli teglar:

<h1>Choyxona «Bahor»</h1>
<ul>
  <li>Osh</li>
  <li>Lag'mon</li>
</ul>
<p>Har kuni ochiqmiz.</p>

6.2 Qoida: div — oxirgi chora

div yoki span yozishdan oldin o'zingizga savol bering: "Bu nima?" Agar javob — sarlavha, paragraf, ro'yxat, iqtibos, vaqt, kod — o'sha tegni ishlating.

HTML'da yana ko'p ma'noli teglar bor. Keyingi darslarda ular bilan tanishasiz: sahifa qismlari uchun header, nav, main, footer, mustaqil maqola uchun article, rasm va izoh uchun figure. Hozir ularni bilish shart emas. Faqat eslab qoling: div o'rniga ko'pincha ma'noli teg bor, va bu mavzu Semantik HTML darsida davom etadi.

div qachon to'g'ri? Guruh faqat ko'rinish yoki JavaScript uchun kerak bo'lganda va hech bir ma'noli teg mos kelmaganda. 2-bo'limdagi taom kartochkasi — shunday holat.

Tekshirib ko'ring: Sahifa tepasidagi "Choyxona «Bahor»" yozuvini <div class="sarlavha"> ga yozdingiz va CSS bilan katta qildingiz. Ekranda chiroyli. Nima muammo?

7. Bosiladigan div — accessibility tuzog'i

JavaScript'ni o'rgangach, shunday kodni yozish vasvasasi paydo bo'ladi:

<div class="tugma" onclick="buyurtmaBer()">Buyurtma berish</div>

onclick — element bosilganda JavaScript kodini ishga tushiradigan atribut (JavaScript'ni keyingi qismlarda o'rganamiz). Sichqoncha bilan bosilsa ishlaydi. Lekin:

• Klaviatura bilan Tab bosib unga yetib bo'lmaydi — div fokus olmaydi.
• Enter bosganda hech narsa bo'lmaydi.
• Ekran o'quvchi uni "tugma" deb e'lon qilmaydi — ko'zi ojiz foydalanuvchi bu yerda tugma borligini bilmaydi.

To'g'risi — haqiqiy tugma. Unda bularning hammasi tayyor:

<button type="button">Buyurtma berish</button>

Tugma yoki havolani qanday tanlashni Tugma yoki havola darsida ko'ramiz. Hozircha qoida: bosiladigan narsa — button yoki a, hech qachon div emas.

8. Ko'p uchraydigan xatolar

8.1 Takrorlangan id

<div id="osh">Toshkent oshi</div>
<div id="osh">Samarqand oshi</div>

Nu HTML Checker:

Error: Duplicate ID “osh”.
Warning: The first occurrence of ID “osh” was here.

Tarjimasi: "Takrorlangan ID: 'osh'." va "'osh' ID'sining birinchi uchrashuvi shu yerda edi." Brauzer xato bermaydi, lekin havolalar va JavaScript faqat birinchisini topadi. Tuzatish: noyob nomlar bering (toshkent-oshi, samarqand-oshi) yoki guruh bo'lsa — class ishlating.

8.2 p ichida div

<p>Bugungi taklif: <div class="aksiya">Osh + choy</div></p>

Error: No “p” element in scope but a “p” end tag seen.

Tarjimasi: "Ochiq p elementi yo'q, lekin p ning yopuvchi tegi uchradi." Sarlavhalar darsida h2 bilan ko'rgan holat: div block element, u paragrafni o'sha joyda yopadi. Keyingi </p> esa "yetim" qoladi. Tuzatish: gap ichida span ishlating: <span class="aksiya">.

8.3 span ichida div

<span><div>Osh</div></span>

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

Tarjimasi: "Bu kontekstda div span ning bolasi bo'la olmaydi." Inline quti ichiga block quti qo'yilmaydi. Tuzatish: tashqi elementni div qiling yoki ichkisini span.

8.4 Bo'sh joy uchun bo'sh div

<div class="bosh-joy"></div>

Ikki blok orasida oraliq yaratish uchun bo'sh quti. Ishlaydi, lekin HTML'ni ko'rinish bilan ifloslantiradi. Tuzatish: oraliqni CSS'da margin bilan bering.

9. Mashqlar

1-mashq (oson): div, span yoki ma'noli teg?

1. Uchta taom kartochkasini bitta guruhga yig'ish (faqat CSS uchun) →
2. Gap ichidagi narxni boshqa rangga bo'yash →
3. Sahifa bo'lim nomi "Ichimliklar" →

2-mashq (o'rta): Div soup'ni tuzating

<div class="katta-matn">Bizning menyu</div>
<div class="royxat">
  <div>Osh</div>
  <div>Manti</div>
</div>
<p>Narxlar: <div class="qizil">30 000 so'mdan</div></p>
<div id="aloqa">Tel: 90 000 00 00</div>
<div id="aloqa">Manzil: Chilonzor</div>

<h2>Bizning menyu</h2>
<ul>
  <li>Osh</li>
  <li>Manti</li>
</ul>
<p>Narxlar: <span class="narx">30 000 so'mdan</span></p>
<p id="telefon">Tel: 90 000 00 00</p>
<p id="manzil">Manzil: Chilonzor</p>

3-mashq (qiyin): Menyu kartochkalari

choyxona/menyu.html da "Kun taomlari" bo'limini yarating:

1. h2 "Kun taomlari".
2. Uchta kartochka — har biri div class="taom-karta": ichida h3 (nomi), p (tavsifi) va narxli p. Narx span class="narx" ichida.
3. Eng mashhur taom kartochkasiga qo'shimcha mashhur klassi va noyob id="kun-taomi".
4. npx html-validate menyu.html — xato 0.

Maslahat: Emmet'da (div.taom-karta>h3+p+p>span.narx)*3 qisqartmasi uchala kartochkaning skeletini bir zumda yaratadi.

<h2>Kun taomlari</h2>

<div class="taom-karta mashhur" id="kun-taomi">
  <h3>Toshkent oshi</h3>
  <p>Qozonda damlangan, bedana tuxumi bilan.</p>
  <p>Narxi: <span class="narx">35 000 so'm</span></p>
</div>

<div class="taom-karta">
  <h3>Lag'mon</h3>
  <p>Qo'lda cho'zilgan xamir, go'shtli qayla.</p>
  <p>Narxi: <span class="narx">28 000 so'm</span></p>
</div>

<div class="taom-karta">
  <h3>Manti</h3>
  <p>Bug'da pishgan, qovoqli.</p>
  <p>Narxi: <span class="narx">30 000 so'm</span></p>
</div>

10. Real ishda

• Har qanday zamonaviy sayt ichida minglab div bor — ular joylashuv (layout) uchun kerak. Muammo div ning o'zida emas, uni ma'noli teg o'rniga ishlatishda.
• Tailwind va boshqa CSS vositalari (kursda alohida o'rganamiz) div va span larga ko'p klass beradi: class="p-4 rounded shadow". Klassni tushunsangiz, bunday kodni o'qish oson.
• Kod review'da tajribali dasturchilar "bu div emas, button bo'lishi kerak" yoki "bu yerda ul so'raladi" deb izoh qoldiradi. Accessibility bo'yicha tekshiruvlar bosiladigan div larni birinchi topadi.
• DevTools'da ishlash. Begona saytni o'rganayotganda Elements panelida div lar daraxti ichidan kerakli elementni klass nomi bo'yicha topish — kundalik ish.

Xulosa

• div — block quti (elementlar guruhi), span — inline quti (matn bo'lagi); ikkalasi ham ma'nosiz.
• Block elementlar yangi qatordan boshlanadi, inline — matn ichida oqadi; inline ichiga block qo'yilmaydi.
• class — guruh nomi (takrorlanadi, bir nechta bo'lishi mumkin), id — noyob nom.
• Klass nomi ma'noni aytadi (narx), ko'rinishni emas (qizil-matn).
• "Div soup" dan qoching: avval ma'noli teg qidiring, div — oxirgi chora.
• Bosiladigan narsa — button yoki a, hech qachon div emas.

Keyingi dars: Ko'p tilli matn, yo'nalish va tahrir izlari — matn qismlarining tili, o'ngdan chapga yoziladigan matnlar va ins/del bilan tahrir tarixini belgilash.

Manbalar

• MDN: <div>, <span>, "Block-level content", "Inline-level content" — developer.mozilla.org
• MDN: "class" va "id" global atributlari — developer.mozilla.org