Images and Figures
What Is It?
An image displays a picture. A figure keeps a picture and its caption together.
What the Tags Mean
img: shows an image.src: the image path.alt: text that explains the image.figure: groups an image and caption.figcaption: the visible caption.
Example 1
Save each example as index.html and open it in your browser. Each code block is a complete page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Images and Figures</title>
</head>
<body>
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22lightblue%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%22100%22%20font-size%3D%2224%22%3ESample%20garden%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Sample garden illustration" width="300">
</body>
</html>Browser preview
What you see: A sample garden illustration appears at 300 pixels wide. The image is included in the code.
Example 2: Another Use
This example includes an illustration and a visible caption underneath.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Images and Figures</title>
</head>
<body>
<figure>
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22lightblue%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%22100%22%20font-size%3D%2224%22%3ESample%20garden%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Sample garden illustration" width="300">
<figcaption>Sample garden illustration.</figcaption>
</figure>
</body>
</html>Browser preview
Simple Tip
A purely decorative image can use alt="". Useful images need useful alternative text.
Try It Yourself
Add an image and write an alt value that explains what matters in it.