HTML Images

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 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

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.

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.

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.

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.

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>

• 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

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>

Choose the option that lists all and only the correct statements.

1. width
2. height
3. alt
4. float

Choose the option that lists all and only the correct statements.

1. <img src="classroom.jpg" width="100%" alt="10th class students in classroom">

2. <img alt="No image source">

3. <img src="sports-day.png" style="max-width: 100%; height: auto;" alt="Sports Day celebration">

4. <img src="sciencefair.jpg" float="right">

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.