Chapter 4: Images, Figures, and Simple SVG

Images bring tone and texture to a page. They can explain an idea, support a paragraph, or simply give the page a friendlier voice. HTML offers a small set of steady tools for placing images with meaning, wrapping them in a <figure> when they need context, and using inline SVG for sharp icons that scale cleanly. This chapter introduces these ideas at a gentle pace.

Placing images with purpose

The <img> element inserts an image into the flow of the page. You give it a src that points to the file and an alt text that states the essential meaning for people who use screen readers. Images without helpful alt text become obstacles, so keep the description plain and direct.

This small example shows a simple placement.

<img src="sunset.jpg" alt="Orange sky at dusk">

The browser displays the image at its natural size unless you add a few optional attributes. You can set a width or height directly on the element, and the browser preserves the aspect ratio if you provide only one dimension. You can also add an optional border, although most pages leave borders to CSS.

<img src="sunset.jpg" alt="Orange sky at dusk" width="300" border="1">

The example above forces the displayed width to 300 pixels. The browser scales the height automatically to keep the image balanced. The border attribute is included here because it helps you see the frame of the image without introducing CSS too early in the book. A cleaner and more flexible method using CSS will be shown later.

Using figure and figcaption

Some images carry meaning that deserves a small explanation. You can group an image with its caption inside a <figure>. This creates a semantic bundle that tools can understand and that layouts handle more gracefully.

A figure with a caption

Here is a simple pattern you will use often.

<figure>
  <img src="lake.jpg" alt="Still water with morning light">
  <figcaption>A quiet view from the northern path</figcaption>
</figure>

The caption should add context rather than restating the alt text. The alt is for clarity, while the caption is for understanding.

Responsive images

Different devices benefit from different image sizes. A wide monitor can show a large, detailed image, while a small phone needs something lighter. The <picture> element allows the browser to choose which file to load based on screen width or pixel density.

A responsive example

The pattern uses one or more <source> elements followed by a regular <img> as a fallback.

<picture>
  <source srcset="mountain-large.jpg" media="(min-width: 800px)">
  <source srcset="mountain-medium.jpg" media="(min-width: 500px)">
  <img src="mountain-small.jpg" alt="Mountain ridge in sunlight">
</picture>

The browser checks the media conditions from top to bottom and picks the first match. If none match, it uses the <img> at the end. This keeps loading efficient without any scripts.

Inline SVG for icons and small diagrams

SVG images scale smoothly at any size, which makes them ideal for icons and simple diagrams. Inline SVG sits directly in your HTML so the browser can draw it without loading another file. The shapes stay crisp on all screens.

A tiny icon example

This example draws a small heart shape using SVG.

<svg width="32" height="32" viewBox="0 0 32 32" aria-label="Heart icon">
  <path d="M16 29 L3 16 C-2 10 4 2 10 5 C13 7 16 11 16 11 C16 11 19 7 22 5 C28 2 34 10 29 16 Z"></path>
</svg>

It looks like this:

The path draws the shape with a series of coordinates. You do not need to memorise these commands at this stage. What matters is the idea that SVG is made from small, readable drawing steps that the browser traces into smooth shapes. Later on in Chapter 9 you will learn how to edit and simplify these paths, and how to build your own small icons with confidence. The important idea is that SVG is text based, lightweight, and designed for clean vector shapes.