← HTML tutorial

HTML

Images

The <img> tag embeds a picture. It's self-closing, no separate closing tag, and needs a src attribute pointing at the image file or URL.

Example 1: a complete, correct image tag

<img src="https://picsum.photos/seed/htmltutorial/400/200"
     alt="A random placeholder photo"
     width="400">

Always add an alt attribute: a text description shown if the image fails to load, and read aloud by screen readers for visually impaired visitors. It is not optional decoration, a missing or lazy alt="" on a meaningful image is one of the most common accessibility mistakes on the web, and one of the cheapest to fix.

Example 2: when alt text should be deliberately empty

<img src="decorative-swirl.png" alt="">

Not every image carries information, a purely decorative flourish should use alt="" (present, but empty on purpose) so a screen reader skips it silently instead of announcing something useless like "decorative swirl image." Rule of thumb: if removing the image loses information, describe it; if it loses nothing, mark it decorative.

Try it yourself
Ready to go further?

These free tutorials are a preview, our Frontend Development cohort covers it in depth, with a real project and a cohort alongside you. Active

Enroll in Frontend Development
Don't miss out

Ready to build something real?

Create a free account to enroll in a track, and get notified the moment a cohort opens.

Create free account