HTML · Lesson 5 of 9
Images
The <img> element, alt text, sizes and responsive images.
Images use the empty element <img src="…" alt="…">.
src— the image file.alt— text read by screen readers and shown if the image fails. Describe what matters; usealt=""for purely decorative images.width/height— reserve space so the page doesn't jump while loading.loading="lazy"— load images lower down the page only when needed.
Use <figure> and <figcaption> to give an image a caption.
Try it yourself
Edit the code and press Run (or Ctrl/⌘ + Enter). Code runs only in your browser, in a sandbox.
Key points
- Always write useful alt text.
- Set width and height to avoid layout shift.
- max-width:100% keeps images inside small screens.
Quick check
What is the alt attribute for?
alt is the text alternative — essential for accessibility and shown when the image cannot load.
Practice task
Add an image with width, height, a meaningful alt text and loading="lazy", wrapped in a <figure> with a caption.
Interview corner
Why set width and height on images?
The browser can reserve the space before the image loads, preventing layout shift (a Core Web Vitals metric).
When should alt be empty?
When the image is purely decorative and adds no information — alt="" tells screen readers to skip it.
Further reading
Official documentation, linked for deeper study. These are outside sites; this lesson's text is our own.
Original lesson written by the InfoparkDaily team · © 2026 InfoparkDaily · Free to learn — no paid course or subscription.