HTML figure va figcaption: rasm, kod va iqtibosni izoh bilan bog'lash

Qisqacha: figure — asosiy matnda tilga olinadigan, lekin o'zi alohida tura oladigan blok: rasm, grafik, kod parchasi yoki iqtibos. figcaption — shu blokning ko'rinadigan izohi, u figure ichida birinchi yoki oxirgi bo'ladi. Izoh hamma uchun, alt esa rasm o'rnini bosuvchi matn — ular bir-birini to'ldiradi.

Bu darsda

• Rasmni izoh bilan figure va figcaption orqali bog'laysiz.
• Bir nechta rasmni bitta izoh ostiga yig'asiz.
• Kod va iqtiboslarni figure ichida rasmiylashtirasiz.
• alt va figcaption ni takrorlamasdan yozasiz.
• Qaysi rasm img, qaysi biri CSS fon rasmi bo'lishini tanlaysiz.

Oldin bilishingiz kerak: Yaxshi alt matn yozish.

1. Nega bu kerak?

Gazetadagi suratni eslang: ostida kichik yozuv bor — "Choyxona «Bahor» oshpazi Rustam aka yangi qozon oldida". Surat va yozuv — bitta butun. Yozuvni suratdan ajratib boshqa sahifaga qo'ysangiz, u ma'nosini yo'qotadi.

HTML'da shu bog'liqlikni ifodalash uchun ikki teg bor. Ularsiz rasm va uning ostidagi paragraf — shunchaki yonma-yon turgan ikki element. Brauzer, ekran o'quvchi va Google ularning bir-biriga tegishli ekanini bilmaydi.

2. figure va figcaption

2.1 Asosiy shakl

<figure>
  <img src="../assets/images/rustam-aka.jpg"
       alt="Oshpaz katta qozonda oshni kavlamoqda"
       width="1200" height="800">
  <figcaption>
    Bosh oshpaz Rustam aka — 25 yillik tajriba.
  </figcaption>
</figure>

• figure — butun blok: rasm va izoh birgalikda.
• figcaption — izoh. U figure ning birinchi yoki oxirgi bolasi bo'ladi va faqat bitta.

Brauzer figure ni chap va o'ngdan biroz ichkariga surib ko'rsatadi. figcaption — oddiy matn. Ko'rinishni CSS bilan xohlagancha o'zgartirasiz.

Ekran o'quvchi ham bu bog'liqlikni biladi. U figure ni "shakl" (figure) deb e'lon qiladi va figcaption matnini uning nomi sifatida o'qiydi.

2.2 figure qachon kerak?

figure ning asosiy belgisi: u asosiy matndan ajratilsa ham, matn buzilmaydi. Kitobdagi "1-rasm", "2-jadval" kabi. Matnda "1-rasmga qarang" deyiladi, rasmning o'zi esa boshqa sahifada yoki ilovada bo'lishi mumkin.

Har bir img figure bo'lishi shart emas:

Bo'sh joyni to'ldiring: bitta figure ichida nechta figcaption bo'lishi mumkin?

3. Bir nechta rasm — bitta izoh

figure ichida bir nechta rasm bo'lishi mumkin. Masalan, "oldin va keyin" yoki bir mavzudagi suratlar:

<figure>
  <img src="../assets/images/zal-2020.jpg"
       alt="Eski zal: yog'och stollar, devorda gilam"
       width="600" height="400">
  <img src="../assets/images/zal-2026.jpg"
       alt="Yangi zal: yorug', keng derazalar, milliy naqshli shift"
       width="600" height="400">
  <figcaption>
    Choyxona zali: 2020-yil va ta'mirdan keyin, 2026-yil.
  </figcaption>
</figure>

Izoh ikkala rasmni birlashtiradi, har bir alt esa o'z rasmining mazmunini aytadi.

4. Faqat rasm emas: kod va iqtibos

4.1 Kod parchasi

Texnik maqolalarda kod bloki ham ko'pincha raqamlangan "rasm" kabi keltiriladi. Kod va texnik matn darsidagi pre va code figure ichiga yaxshi joylashadi:

<figure>
  <figcaption>
    1-kod. Choyxona sahifasining eng kichik skeleti
  </figcaption>
  <pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="uz"&gt;
&lt;title&gt;Bahor&lt;/title&gt;</code></pre>
</figure>

Bu yerda figcaption birinchi turibdi — kod oldidan sarlavha kabi. Ikkala joylashuv ham to'g'ri.

4.2 Iqtibos va uning muallifi

Iqtibos darsida muallifni blockquote ichiga yozish mumkin emasligini aytgan edik va chiroyli usulni keyinga qoldirgan edik. Mana u:

<figure>
  <blockquote>
    <p>Toshkentda bunday oshni boshqa hech qayerda yemaganman.</p>
  </blockquote>
  <figcaption>— Malika, doimiy mijozimiz</figcaption>
</figure>

Iqtibos blockquote da, muallif esa figcaption da — tashqarida, lekin iqtibos bilan bitta blokda. Standart talabi ham bajarildi, bog'liqlik ham aniq.

Tekshirib ko'ring: Nega muallifni blockquote ichidagi oxirgi paragrafga yozish noto'g'ri edi?

5. alt va figcaption: takrorlamaslik

Ikkalasi ham rasm haqida matn. Lekin vazifalari boshqa (o'tgan darsda qisqa ko'rgan edik):

• alt — rasmni ko'rmaydiganlar uchun uning o'rnini bosadi: "nima tasvirlangan".
• figcaption — hamma uchun qo'shimcha ma'lumot: "bu haqda nima deymiz".

Bir xil matn:

<figure>
  <img src="manti.jpg" alt="Qovoqli manti" width="600" height="400">
  <figcaption>Qovoqli manti</figcaption>
</figure>

Ekran o'quvchi "Qovoqli manti" ni ikki marta o'qiydi.

Bir-birini to'ldiradi:

<figure>
  <img src="manti.jpg" alt="Bug'da pishgan beshta manti, ustida qatiq"
       width="600" height="400">
  <figcaption>
    Qovoqli manti — kuzgi menyuda, 30 000 so'm.
  </figcaption>
</figure>

Alt rasmda nima borligini aytadi. Izoh esa rasmda ko'rinmaydigan ma'lumotni qo'shadi: qachon va qancha.

6. img mi yoki CSS fon rasmi?

Rasmni sahifaga ikki yo'l bilan qo'yish mumkin: HTML'da img bilan yoki CSS'da fon rasmi (background-image) sifatida. CSS'ni hali o'rganmadik, lekin tanlov qoidasini hozirdan bilish kerak — u aynan HTML qaroridir.

img kerak, agar rasm kontentning bir qismi bo'lsa:

• U ma'lumot beradi va unga alt kerak.
• Google Rasmlar'da topilishi kerak.
• Chop etilganda ham ko'rinishi kerak.
• Foydalanuvchi uni saqlab olishi mumkin.

CSS fon rasmi kerak, agar rasm faqat bezak bo'lsa:

• Naqsh, tekstura, rangli fon.
• Katta sarlavha orqasidagi xira surat, ustida matn turadi.
• Ma'nosi yo'q — yo'qolsa, hech narsa yo'qolmaydi.

Oddiy test: rasmni olib tashlasangiz, foydalanuvchi ma'lumot yo'qotadimi? Ha — img (alt bilan). Yo'q — CSS fon.

Tekshirib ko'ring: Bosh sahifa tepasida katta sarlavha "Choyxona «Bahor»" va uning orqasida xira qozon surati. Surat img bo'lishi kerakmi?

7. Ko'p uchraydigan xatolar

7.1 figcaption — figure dan tashqarida

<img src="osh.jpg" alt="Osh" width="600" height="400">
<figcaption>Toshkent oshi</figcaption>

Nu HTML Checker:

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

Tarjimasi: "Bu kontekstda figcaption body ning bolasi bo'la olmaydi." figcaption faqat figure ichida yashaydi. Tuzatish: ikkalasini figure ga o'rang.

7.2 Ikkita figcaption

<figure>
  <img src="osh.jpg" alt="Osh" width="600" height="400">
  <figcaption>Toshkent oshi</figcaption>
  <figcaption>35 000 so'm</figcaption>
</figure>

html-validate:

Element <figcaption> can only appear once under <figure>

Tarjimasi: "figcaption figure ichida faqat bir marta bo'lishi mumkin." Tuzatish: matnlarni bitta izohga birlashtiring: "Toshkent oshi — 35 000 so'm".

7.3 Hamma rasm — figure

Logotip, ikonkalar, havoladagi kichik rasmlar ham figure ga o'ralgan. Sahifada o'nlab "shakl" paydo bo'ladi — ekran o'quvchi ularning hammasini e'lon qiladi. Tuzatish: figure faqat matnda tilga olinadigan, mustaqil illyustratsiyalar uchun.

7.4 figcaption alt'ni almashtiradi deb o'ylash

<figure>
  <img src="osh.jpg" alt="" width="600" height="400">
  <figcaption>Toshkent oshi</figcaption>
</figure>

Rasm ma'lumot beradi, lekin alt bo'sh qoldirilgan: "izoh bor-ku". Ekran o'quvchi rasmni o'tkazib yuboradi va faqat "Toshkent oshi" ni eshittiradi — rasmda aynan nima borligini bilmaydi. Tuzatish: informativ rasmga baribir mazmunli alt yozing.

8. Mashqlar

1-mashq (oson): figure kerakmi?

1. Maqoladagi "1-rasm. Zirvak tayyorlash bosqichlari" surati →
2. Sayt tepasidagi logotip →
3. Maqolada keltirilgan iqtibos va muallifi →

2-mashq (o'rta): Tuzating

<img src="lagmon.jpg" alt="Lag'mon" width="600" height="400">
<p>Lag'mon</p>
<blockquote>
  <p>Eng mazali lag'mon!</p>
  <p>— Jasur</p>
</blockquote>

<figure>
  <img src="lagmon.jpg"
       alt="Qo'lda cho'zilgan lag'mon, ustida go'shtli qayla"
       width="600" height="400">
  <figcaption>
    Lag'mon — har kuni tushlikda, 28 000 so'm.
  </figcaption>
</figure>

<figure>
  <blockquote>
    <p>Eng mazali lag'mon!</p>
  </blockquote>
  <figcaption>— Jasur</figcaption>
</figure>

3-mashq (qiyin): "Biz haqimizda" sahifasi

choyxona/biz-haqimizda/index.html sahifasini yarating:

1. h1 va qisqa tarix paragrafi. Matnda "1-rasmda zalning eski va yangi ko'rinishi" deb tilga oling.
2. figure: ikkita rasm (eski va yangi zal) va bitta izoh "1-rasm. ...".
3. figure: mijoz iqtibosi va uning muallifi.
4. Bosh sahifa tepasidagi fon surati uchun qaror: img yoki CSS? Qarorni HTML izohida (<!-- -->) yozing.
5. npx html-validate — xato 0.

<h1>Biz haqimizda</h1>
<p>«Bahor» 1998-yildan beri ishlaydi. 2026-yilda zal to'liq
ta'mirlandi — 1-rasmda uning eski va yangi ko'rinishi.</p>

<figure>
  <img src="../assets/images/zal-2020.jpg"
       alt="Eski zal: yog'och stollar, devorda gilam"
       width="600" height="400">
  <img src="../assets/images/zal-2026.jpg"
       alt="Yangi zal: yorug', keng derazalar, naqshli shift"
       width="600" height="400">
  <figcaption>
    1-rasm. Zal 2020-yilda va 2026-yilgi ta'mirdan keyin.
  </figcaption>
</figure>

<figure>
  <blockquote>
    <p>Yangi zalda ham osh o'sha-o'sha — eng mazali!</p>
  </blockquote>
  <figcaption>— Jasur, 20 yillik mijoz</figcaption>
</figure>

<!-- Bosh sahifa fon surati: faqat kayfiyat uchun, ma'lumot
     bermaydi — shuning uchun CSS fon rasmi bo'ladi. -->

9. Real ishda

• Yangilik va blog saytlari — surat ostidagi izohlar (ko'pincha fotograf nomi bilan) deyarli har doim figure va figcaption.
• Texnik hujjatlar va darsliklar — raqamlangan rasm, jadval va kod listinglari. Markdown'dan HTML yasovchi ko'p vositalar izohli rasmni avtomatik figure ga o'raydi.
• Onlayn do'konlar — mahsulot galereyasi. Bu yerda figure ixtiyoriy, lekin img va CSS fon tanlovi juda muhim: mahsulot surati doim img bo'lishi kerak — aks holda Google uni ko'rmaydi.
• Accessibility auditi — alt va izohning bir xilligi (takrorlanish) ham kamchilik sifatida qayd etiladi.

Xulosa

• figure — matnda tilga olinadigan, lekin mustaqil tura oladigan blok: rasm, grafik, kod, iqtibos.
• figcaption — figure ichida birinchi yoki oxirgi, faqat bitta.
• Bir figure ichida bir nechta rasm bo'lishi mumkin — izoh ularni birlashtiradi.
• Iqtibos muallifi — blockquote dan tashqarida, figcaption da.
• alt — rasmning o'rinbosari, figcaption — hamma uchun qo'shimcha; ular takrorlanmasin.
• Ma'lumot beradigan rasm — img; faqat bezak — CSS fon rasmi.

Keyingi dars: Responsive rasmlar I: srcset va sizes — telefon va katta ekran uchun turli o'lchamdagi rasmlarni brauzerga taklif qilish.

Manbalar

• MDN: <figure>, <figcaption> — developer.mozilla.org
• WHATWG HTML: "The figure element" — html.spec.whatwg.org
• W3C WAI: "Images Tutorial — Groups of images" — w3.org/WAI/tutorials/images