HTML Full Course [Day 7] [Hindi] 💻 | Images and Figure Tag 🚀 | Mohit Decodes

HTML Tutorial – Part 7: Images & <figure> Tag

Welcome to Day 7 of the HTML Full Course [Hindi] by Mohit Decodes! In this tutorial, we will learn how to display images in HTML and use the <figure> and <figcaption> tags to make them semantically meaningful and accessible.

📌 Adding Images in HTML

To display an image, use the <img> tag. It's a self-closing tag and requires at least two attributes:

1. src: the source path of the image
2. alt: alternative text for accessibility and SEO

✅ Example:

⚠️ Important Notes:

1. Use relative paths for local images.
2. Use absolute URLs for images from other websites.
3. Always include alt text for screen readers and SEO.
4. You can use width and height to resize images.

🧩 The <figure> and <figcaption> Tags

The <figure> tag is used to wrap self-contained visual content like an image, diagram, or chart. The <figcaption> tag is used to provide a caption or description for the image.

✅ Example:

🎯 Benefits of Using <figure>:

1. Improves semantic structure
2. Pairs content with meaningful captions
3. Enhances accessibility

🔐 Bonus Attributes for <img>:

1. loading="lazy" – Defers loading until the image is needed
2. title="Tooltip" – Shows extra info when hovering
3. style="border-radius: 10px;" – Custom CSS for image styling