BeingXpert Learn & Build Future

9. HTML Images

What you will learn

  • How to show an image with <img>
  • Why alt text matters
  • How to set image size
  • How to add a caption with <figure>

The img element

The <img> element displays an image. It is an empty element, so it has no closing tag. It needs two attributes: src (where the file is) and alt (a text description).

Syntax

<img src="url" alt="description">

Example

<img src="blue-box.png" alt="A blue rectangle" width="120" height="80">

Output (a sample image is built into this page)

A blue rectangle

The src attribute

  • src="photo.jpg": the file is in the same folder as your page.
  • src="images/photo.jpg": the file is inside a folder called images.
  • src="https://example.com/photo.jpg": the file is on another website.

Only use images you made or have permission to use.

The alt attribute

Write alt text that describes what the image shows or why it is there.

  • Screen readers read it aloud.
  • The browser shows it if the image cannot load.
  • Search engines use it to understand the image.

For a purely decorative image, use an empty value: alt="".

Width and height

Set width and height in pixels. The browser then reserves the space before the image loads, so the page does not jump around.

Example

<img src="logo.png" alt="Company logo" width="200" height="100">

To keep a large image from overflowing small screens, use CSS: img { max-width: 100%; height: auto; }

Lazy loading

Add loading="lazy" to images lower down the page. The browser then loads them only when the visitor scrolls near them.

Example

<img src="photo.jpg" alt="Mountain at sunrise" width="600" height="400" loading="lazy">

Images as links

Example

<a href="home.html">
  <img src="logo.png" alt="Go to the home page" width="100" height="50">
</a>

When an image is the only content of a link, its alt text works as the link text.

Captions with figure and figcaption

Example

<figure>
  <img src="chart.png" alt="Bar chart of monthly visitors" width="300" height="200">
  <figcaption>Figure 1: Visitors per month.</figcaption>
</figure>

Output

Bar chart of monthly visitors
Figure 1: Visitors per month.

Common mistakes

  • Leaving out alt.
  • Wrong file name or capital letters in src, so the image shows as broken.
  • Uploading huge photos. Resize and compress them first, as they slow your page down.
  • Stretching an image by setting only a different width and height than its real shape.

Exercise

Add an image cat.jpg, 300 pixels wide and 200 pixels high, with the alt text A cat sleeping on a sofa.

Show solution 
<img src="cat.jpg" alt="A cat sleeping on a sofa" width="300" height="200">

Knowledge check

1. Which attribute holds the image file path?

src

2. Does <img> have a closing tag?

No. It is an empty element.

3. Which element adds a caption to an image?

<figcaption>, inside a <figure>.

Summary

  • <img src="..." alt="..."> shows an image.
  • Always write helpful alt text.
  • Set width and height, and use loading="lazy" for lower images.
  • <figure> and <figcaption> add a caption.
Scroll to Top