The img Tag

The <img> tag is a void, self-contained element — it never wraps content, it just points the browser at an image resource and describes it.

Syntax

<img src="path/to/image.jpg" alt="description" width="600" height="400">

Basic Example

<img src="/assets/images/logo.png" alt="CodingNow logo" width="160" height="48">

Browser output: the logo image renders at 160×48 pixels, reserving exactly that space in the layout even before the file has finished downloading.

How It Works

1. The browser requests the file at src as soon as it parses the tag.
2. While loading (or if loading fails), the alt text is what's shown/announced instead.
3. <img> has no closing tag and no children — everything about it is expressed through attributes.

Important Attributes

Real-World Example

<img
    src="/assets/images/students-coding.jpg"
    alt="Two CodingNow students pair-programming during a live session"
    width="800"
    height="533"
    loading="lazy"
>

A realistic, production-ready image tag — descriptive alt text, explicit dimensions, and lazy loading all combined, exactly as a real course page would use it.

Common Mistakes

• Missing or empty src, producing a broken image icon
• Omitting alt entirely rather than at minimum providing alt="" for genuinely decorative images (see image-alt-attribute)
• Leaving out width/height, which causes the page to visually jump as images load in — a real, measurable user-experience problem

Best Practices

• Always pair src with meaningful alt
• Always specify width/height (even if CSS later overrides the display size)
• Use loading="lazy" for any image not visible in the initial viewport

Accessibility Considerations

Every <img> should have an alt attribute — either descriptive text for meaningful images, or an empty alt="" to explicitly tell screen readers to skip a purely decorative one. A missing alt attribute (as opposed to an intentionally empty one) is treated differently by assistive technology and should be avoided.

SEO Considerations

Search engines can't "see" an image the way humans do — alt text is the primary signal they use to understand and index it, including for image search results.

Browser & Modern HTML Notes

<img> has existed since the earliest days of the web; everything newer in this space (srcset, <picture>, native lazy loading) builds on top of this same core tag rather than replacing it.

Mini Practice

1. Add an <img> with src, meaningful alt, and explicit width/height.
2. Add a second, purely decorative image using alt="" correctly.

Related HTML Notes

• Images (overview)
• image-alt-attribute
• figure