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.

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

← Links Lists →