Adding images

Add images with <img> and the src and alt attributes.

The img element

The <img> element adds an image to the page. Unlike most elements, it has no closing tag: it is a void element. On its own <img> shows nothing; you must give the image address with the src attribute.

The address can be a URL: a web address (for example https://example.com/landscapes/lake.jpg) or a file path inside your own site (for example img/lake.jpg). The browser requests that address and renders the image on the page.

The alt attribute

The alt attribute carries a text description of the image. If the image cannot load (wrong address, slow connection, blocked images) this text is shown instead. Screen-reader users also recognise the image from this text.

The content should be meaningful: alt="Sunset by the lake" is good; alt="image" is weak. If the image is purely decorative, use alt="" to tell the screen reader to skip it.

Exercise Add an image

Add an <img> element to body. Write a realistic image address in src and a short description in alt.

Show example solution

<body>
  <img src="https://example.com/landscapes/lake.jpg" alt="Sunset by the lake">
</body>

Test yourself

Which attribute gives the file address of an image?
- title
- src
- alt
- href
Show answer

src — Correct. The src attribute carries the image address; the browser loads it from there.

Write the src attribute in the img tag

<img ____="https://example.com/city/square.jpg" alt="City square">

Show answer

<img src="https://example.com/city/square.jpg" alt="City square">

Match each attribute to its role

src

Image address
alt

Image text description
href

Link address (a element)
title

Tooltip on hover

Next lesson: Image dimensions

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies