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 locationalt
: 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
andfigcaption
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.
Comments
Loading comments...