Images in HTML
img Tag, alt, Responsive & Figure

Images in HTML: Telling Visual Stories on the Web

Images make content more engaging, informative, and emotional. Whether you're showcasing a fruit, illustrating a concept, or enhancing user experience — HTML gives you powerful tools to embed and control images effortlessly.

The <img> Tag: Displaying an Image

The <img> tag is how you add images to a webpage. It’s self-closing and requires at least one attribute: src, which defines the path to your image.

<img src="apple.jpg" alt="Red apple">

Key attributes:

• src: The image file location
• alt: Descriptive alternative text shown if the image fails or for screen readers

Using Alt Text: Accessibility & Fallback

Alt text is not an afterthought — it’s essential. It improves accessibility and SEO. Let’s see what happens when the image can’t be found:

<img src="banana.jpg" alt="A ripe banana">

[Image of a ripe banana or "A ripe banana" if the file is missing]

The alt text acts like a verbal description — use it meaningfully.

Image Sizing and Alignment

You can control how big your image appears using the width and height attributes.

<img src="cherry.jpg" alt="Fresh cherries" width="200" height="150">

[Image of cherries scaled to 200x150 pixels]

Alternatively, CSS (later lessons) offers more flexible sizing. Avoid distorting the aspect ratio unless intentional.

Responsive Images: Fit All Screens

Today’s websites must look good on phones, tablets, and desktops. Make images responsive by using percentages or CSS, but HTML alone can help too.

<img src="fruit-basket.jpg" alt="Basket of fruits" style="max-width: 100%; height: auto;">

[Image scales with the width of the container, preserving proportions]

This makes the image fluid — resizing based on the screen size. It's essential for mobile-friendly design.

Figure and Figcaption: Meaningful Visual Context

Sometimes, an image needs a caption. HTML5 introduced the <figure> and <figcaption> tags for this purpose.

<figure>
  <img src="apple.jpg" alt="Red apple on a white background" width="200">
  <figcaption>A fresh apple ready to eat.</figcaption>
</figure>

[Image of an apple]
A fresh apple ready to eat.

The <figcaption> gives the image a voice. It enhances understanding, especially in articles or educational content.

Examples Recap

Basic Image:

<img src="apple.jpg" alt="Red apple">

Missing Image with Alt Text:

<img src="missing.jpg" alt="This image is unavailable">

Responsive Image with Style:

<img src="fruit.jpg" alt="Fruit display" style="max-width: 100%; height: auto;">

Figure with Caption:

<figure>
  <img src="banana.jpg" alt="Yellow banana">
  <figcaption>A banana placed on a table.</figcaption>
</figure>

Best Practices for Images in HTML

• Always use descriptive alt text — it helps users and search engines
• Keep images optimized — large files slow down page loading
• Use relative paths for local files, and full URLs for external images
• Use figure and figcaption when your image adds visual context to content

Summary

You’ve just unlocked the visual dimension of web content. Now you know how to:

• Use the <img> tag to display images
• Write effective and meaningful alt text
• Resize and align images with attributes and inline styles
• Create responsive images that adapt to screens
• Enhance semantic structure with <figure> and <figcaption>

What’s Next?

Now that your content has visual life, let’s move into structured layouts. In the next lesson, we’ll build and format Tables in HTML — for displaying data cleanly and clearly.