🎓 A1Learner
🔍

HTML Images

The img element puts a picture on a page. The img element is an empty element, so it has no closing tag.

Show an image

The src attribute names the picture. This lesson uses a data URI, an address that carries a tiny picture inside itself.

<img src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2760%27 height=%2760%27%3E%3Ccircle cx=%2730%27 cy=%2730%27 r=%2728%27 fill=%27red%27/%3E%3C/svg%3E" alt="A red circle">
<p>A red circle</p>

Alt text describes the picture

The alt attribute gives a text description of the picture. Screen readers read the description aloud for people who cannot see the picture.

<img src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2760%27 height=%2760%27%3E%3Ccircle cx=%2730%27 cy=%2730%27 r=%2728%27 fill=%27blue%27/%3E%3C/svg%3E" alt="A blue circle">
<p>The alt text for this picture is A blue circle.</p>

Set the size

The width and height attributes set the display size in pixels. Giving both values keeps the page layout steady while the picture loads.

<img src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2760%27 height=%2760%27%3E%3Ccircle cx=%2730%27 cy=%2730%27 r=%2728%27 fill=%27red%27/%3E%3C/svg%3E" alt="A red circle" width="120" height="120">
<p>A larger circle</p>

An image inside a paragraph

An img element can sit inside a paragraph. The picture appears between the words around it.

<p>Here is a circle: <img src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2760%27 height=%2760%27%3E%3Ccircle cx=%2730%27 cy=%2730%27 r=%2728%27 fill=%27green%27/%3E%3C/svg%3E" alt="A green circle" width="30" height="30"></p>

Example

<!DOCTYPE html>
<html>
<head>
<title>Circle Gallery</title>
</head>
<body>
<h1>Circle Gallery</h1>
<img src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2760%27 height=%2760%27%3E%3Ccircle cx=%2730%27 cy=%2730%27 r=%2728%27 fill=%27red%27/%3E%3C/svg%3E" alt="A red circle">
<p>A red circle.</p>
<img src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2760%27 height=%2760%27%3E%3Ccircle cx=%2730%27 cy=%2730%27 r=%2728%27 fill=%27blue%27/%3E%3C/svg%3E" alt="A blue circle" width="120" height="120">
<p>A blue circle, shown larger.</p>
</body>
</html>

Key points

  • img element: the empty element that shows a picture
  • src attribute: the address of the picture
  • alt attribute: a text description of the picture
  • Use width and height to set the display size in pixels
  • An img element shows the picture named by its src value.

In this example, the first img element shows a red circle at its natural size. Its alt value describes the picture in words. The second img element shows a blue circle. Its width and height values make the circle display larger. A real page usually names a picture file in src instead of a data URI.

Note

An img element has no closing tag.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

What does the alt attribute do?