Images (<img>) — HTML

Images: The <img> Element

<img> embeds an image in a page. It's a void element (no closing tag, no children) whose behavior is driven entirely by its attributes — most importantly src and alt, plus width/height to keep your layout stable while images load.

Anatomy of <img>

img-basic.html

HTML

<img src="/media/team-photo.jpg" alt="The Let Codes team at their 2026 offsite">

Attribute	Required?	Purpose
`src`	Yes	The image URL (relative or absolute)
`alt`	Yes	Text alternative — read by screen readers, shown if the image fails to load
`width` / `height`	Strongly recommended	Intrinsic dimensions, used to reserve layout space before the image loads
`title`	Optional	Extra tooltip text shown on hover — not a substitute for `alt`

alt Is Required

Every <img> needs an alt attribute. Omitting it entirely is invalid HTML and a real accessibility failure — screen readers fall back to reading the filename, which is rarely useful. If an image is purely decorative, use an empty alt="" rather than skipping the attribute (covered in depth in the alt text tutorial).

alt-required.html

HTML

<!-- Meaningful image: describe it -->
<img src="chart-q1-sales.png" alt="Bar chart showing Q1 sales up 24% year over year">

<!-- Purely decorative: empty alt, not omitted alt -->
<img src="divider-swirl.png" alt="">

width and height Prevent Layout Shift

Without explicit dimensions, the browser doesn't know how much space to reserve for an image before it finishes downloading — content below it jumps around as images pop in. This is measured as Cumulative Layout Shift (CLS), a real performance/UX metric.

width-height.html

HTML

<img
  src="/media/hero.jpg"
  alt="Developer working at a laptop with code on screen"
  width="1200"
  height="600"
>

Aspect ratio, not fixed size

width/height on <img> set the intrinsic aspect ratio the browser reserves space for — you can still resize the image responsively with CSS (width: 100%; height: auto;) and the reserved aspect ratio still prevents layout shift.

The title Attribute

title adds a tooltip that appears on mouse hover. It is not a substitute for alt — most screen readers don't reliably announce title, and it's completely invisible to touch/keyboard-only users.

title-attr.html

HTML

<img
  src="logo.svg"
  alt="Let Codes logo"
  title="Let Codes — learn to code, step by step"
>

Never use title instead of alt

Some developers mistakenly rely on title for accessibility text because it shows a nice hover tooltip. It doesn't reach most screen reader users, keyboard users, or mobile users — always provide a real alt.

Broken Image Fallback Behavior

When an image fails to load (wrong path, network error, deleted file), most browsers show a small "broken image" icon along with the alt text rendered inline — which is exactly why writing good alt text matters even for sighted users.

broken-image.html

HTML

<img src="/does-not-exist.jpg" alt="Diagram of the request/response cycle">

Graceful degradation

A broken image with descriptive alt text still communicates something useful to the visitor. A broken image with no alt (or a meaningless one) just leaves a confusing gap.

Quick Reference

<img> is a void element — no closing tag, no children.
Always include alt — descriptive text for meaningful images, alt="" for decorative ones.
Set width/height on every image to prevent layout shift while it loads.
title is a supplementary tooltip, never a replacement for alt.