Image Types

🖼️ Figure & Figcaption — Photo Ke Saath Caption

<figure><img ...><figcaption>Caption</figcaption></figure>

<figure> image ko uske caption ke saath wrap karta hai. <figcaption> neeche ka caption text hai. Jaise newspaper mein photo — photo aur uska caption ek unit hain.

Yeh semantic HTML hai. Screen readers announce karte hain "Figure: Charminar raat mein. Caption: Ramadan mein Charminar ki roshni." Bina figure/figcaption ke, image aur uska description unrelated elements hain.

🛺

Hyderabad Analogy: Figure jaise deewar pe framed photo ke neeche brass nameplate. Frame (figure) aur nameplate (figcaption) ek set hain. Nameplate alag kamre mein nahi rakhte.

Code Example

HTML — Figure & Figcaption — Photo Ke Saath Caption

<!-- Ek image ke saath caption -->
<figure>
  <img src="charminar.jpg" alt="Charminar raat mein" width="600" height="400">
  <figcaption>Ramadan mein Charminar ki roshni</figcaption>
</figure>

<!-- Ek figure mein multiple images -->
<figure>
  <img src="biryani-1.jpg" alt="Biryani ban rahi hai" width="300" height="200">
  <img src="biryani-2.jpg" alt="Biryani serve hui" width="300" height="200">
  <figcaption>Paradise Biryani — kitchen se table tak</figcaption>
</figure>

<!-- Figure code ke saath (sirf images nahi) -->
<figure>
  <pre><code>const price = 450;</code></pre>
  <figcaption>Biryani ka price rupees mein</figcaption>
</figure>

<figure>Wrapper — image aur caption ko ek unit mein group karta hai

<figcaption>Caption text — figure ko describe karta hai

Multiple <img>Ek figure mein multiple images ek caption share kar sakti hain

<pre> inside <figure>Figure sirf images ke liye nahi — code blocks bhi

✅ When to Use

Koi bhi image jisko caption ya description chahiye
Blog posts mein labeled images
Photo galleries descriptions ke saath
Code blocks explanations ke saath

❌ When NOT to Use

Bina caption wali images (plain <img> use karo)
Decorative images (unhe figure bhi nahi chahiye)

💡

Google figcaption text se images samajhta hai. Achha caption = better image SEO. Descriptive captions likho: "Hyderabadi Dum Biryani saffron rice aur raita ke saath" sirf "Biryani" nahi.

← Back to Images Chapter