Images
Today we look at images on a page: the empty img tag, the src path to the file, and the alt text that describes the picture.
- 1
What an image is on a page
Last lesson we linked words to another address. Today we put a picture on the page. In HTML that picture is not typed as text. It is a file the browser must fetch and draw.
The sign for that is the
<img>tag. It is an empty tag: there is no closing tag and no text between tags. Everything the browser needs sits in attributes on the opening tag. - 2
The Media Dilemma: Displaying Binary Graphics in Text Documents
Early pages were mostly words. People wanted a photo or a logo on the screen, but the browser only reads HTML. Someone had to invent a tag that points to an image file and asks the browser to show it.
That tag is
<img>. Thesrcattribute holds the path to the file. Thealtattribute holds a short description for when the picture cannot be seen — a slow network, a broken path, or a screen reader. - 3
How Browsers Fetch, Layout, and Fallback with Alt Text
The browser reads
<img>, followssrcto load the file, and draws the picture. If the file fails, it can still show or speak thealttext. Writealtthat describes what is in the picture, not the word “image”.In the example below,
srcstarts with/, so the path is from the website root. Wrong path means a broken image icon. - 4
Hands-On: Rendering an Image with Accessible Attributes
Read the one
<img>line below, then look at the browser pane. You should see the picture and know thataltis ready if the file ever fails. - 5
The Golden Rule of Images: Always Pair src with alt
Skip
srcand there is nothing to draw. Skipaltand people who cannot see the picture lose the meaning. Put both on the same empty<img>tag.
Points to the image file on the server or CDN. If this file is missing or 404s, the browser falls back to the alt attribute.
Essential for screen readers, search engine indexing, and when images fail to load. Never leave alt blank on informative imagery.
What you'll learn
- 1Images are files the browser fetches
- 2The empty img tag shows a picture
- 3src holds the path to that file
- 4alt describes the picture in words
- 5Wrong src means a broken image
Line by line
<img>An empty tag. There is no closing tag. The image is the tag itself, not text between tags.
src="/images/momos.svg"Where the file lives. The leading
/means from the website root. Change this path and the picture breaks.alt="A plate of steamed momos with spicy red chutney"A short description of what the picture shows. Screen readers read this aloud. Do not write only “image” or “photo”.
Try it yourself
Write one <img> that uses src="/images/momos.svg" and an alt that names your favourite food on the plate. Keep it one empty tag with both attributes.
Hint: alt should answer: if I cannot see this photo, what should I know?
Common mistakes
- 1.Writing
alt="image"oralt="photo". That helps nobody. Describe what is in the picture. - 2.Leaving out
altentirely. Visually impaired visitors and broken loads then lose the meaning.
Interview prep (Click to reveal)
Q: Why is the alt attribute mandatory for accessible web images?↓
If the image fails to load (due to poor network or broken link), or when a screen reader encounters the tag, alt provides the necessary context. Search engines also index alt text for image search.
Q: What should you set alt to for purely decorative images?↓
Set it to an empty string: alt="" (null alt). This informs screen readers that the graphic is decorative flair and can be safely skipped, rather than reading out the raw file name URL.
Q: Why should you always specify width and height on <img> elements?↓
Specifying explicit width and height allows the browser to reserve the required aspect ratio box before the image finishes downloading, preventing Cumulative Layout Shift (CLS) and jumpy page scrolling.