HTML Images

src and alt

An image is an <img> tag. It has no end tag. src is the path or URL of the file. alt is the text that stands in for the picture: when the file fails to load, when a reader cannot see the image, and when a search engine indexes the page.

Paths work like links. A file next to the HTML is src="photo.jpg". A file in animages folder is src="images/photo.jpg". A file on another host is a fullhttps:// URL. If src is wrong, you get a broken image, not a silent skip.

<img src="images/lab-bench.jpg" alt="Wooden lab bench with a notebook and a glass flask">

<!-- Same idea with a public placeholder URL for a quick test -->
<img src="https://picsum.photos/400/200" alt="Placeholder landscape, 400 by 200 pixels">

Width, height, figure, and figcaption

width and height tell the browser the image’s size in pixels before the file arrives. That reserves space so the page does not jump. They do not crop or compress the file; they only set the layout box. Keep the ratio the same as the real image or the picture stretches.

When a picture has a caption that belongs with it, wrap both in <figure> and put the caption in <figcaption>. The figure is a unit: image plus explanation. That is better than a loose <img> and a nearby paragraph that might wrap away on a small screen.

<figure>
  <img
    src="https://picsum.photos/400/200"
    alt="Rolling hills under a clear sky"
    width="400"
    height="200"
  >
  <figcaption>Figure 1. Sample landscape used to test the img tag.</figcaption>
</figure>

alt describes the picture. figcaption titles or comments on it. Do not copy the same sentence into both. In CSS you can later set max-width: 100% andheight: auto so wide images shrink on a phone. The HTML width and height still help as the intrinsic size.

When src is wrong

A missing file, a typo in the folder name, or a URL that blocks hotlinking all produce a broken image. The browser still shows the alt text in many cases. That is one reason alt is required for content images: it is the fallback, not a caption.

<!-- Deliberately broken path: you should see the alt text instead of a photo -->
<img src="images/file-that-is-not-there.jpg" alt="Notebook open to a page of handwritten scores" width="400" height="200">

<p>Fix src so it matches a real file. Alt is not a substitute for putting the picture on the server.</p>

Decorative images and empty alt

If an image adds no information — a flourish, a divider, a background texture — give italt="". That tells assistive tech to skip it. Do not omit the attribute. A missingalt often makes a reader hear the file name instead.

<p>
  <img src="dot.png" alt="" width="8" height="8">
  Weekly recap
</p>
<p>
  The small dot is decoration. The words “Weekly recap” already say what the line is.
</p>

No local file? Use a box

If you only need a colored rectangle while you learn layout, a div with a background is enough. That is not an image. Swap it for <img> when you have a real file. Prefer a real src path in your project as soon as the photograph exists.