HTML image Tag

What You’ll Learn

By the end of this tutorial, you’ll understand why there is no <image> tag in HTML and how to embed pictures correctly with <img>.

Images are essential for visual design, but many beginners search for an “image tag” that does not exist. This guide clears up the confusion and teaches the correct syntax, attributes, and best practices.

What Is the <image> Tag?

The <image> tag is a common misconception among new web developers. Unlike the widely used <img> element, there is no <image> tag in HTML for embedding pictures in web pages.

Not Deprecated — It Never Existed

The <image> element has never been part of the HTML specification for regular documents, so it cannot be called deprecated. Browsers will not render <image> as an image. Developers should always use <img>.

Note: SVG markup includes an <image> element inside SVG documents only. That is a different technology and is not a substitute for HTML <img> in normal page content.

📝 Syntax

Since <image> does not exist, here is the correct syntax for the <img> tag:

<img src="photo.jpg" alt="Description of the image">

Syntax Rules

• <img> is a void element — no closing tag is required in HTML.
• src points to the image file URL or path.
• alt is required for accessibility (use alt="" only for decorative images).
• Set width and height to prevent layout shift while the image loads.
• Do not write <image> — it is invalid for HTML page content.

⚖️ <image> vs <img>

The tag name matters — only one of these is valid for HTML pages:

<!-- Wrong: no such HTML tag -->
<image src="photo.jpg" alt="Photo">

<!-- Correct -->
<img src="photo.jpg" alt="Photo">

⚖️ <img> vs <picture>

Both display images, but serve different needs:

Examples Gallery

Basic embedding, responsive images, and common mistake patterns with copy-ready code and live previews.

Live Preview

Correct image embedding with the <img> element:

Embedding Images

The primary way to add pictures to a web page is the <img> tag — not <image>.

embedding-images.html

Copy

<img src="example.jpg" alt="Example image">

View Output Try It Yourself

📤 Output:

📚 Common Use Cases

Use <img> for logos, photos, icons, and illustrations. Combine with srcset for responsive layouts, or wrap in <picture> when you need format fallbacks or art direction.

Responsive Images

Ensure images scale properly across devices with srcset and sizes on img.

responsive-images.html

Copy

<img
  src="small.jpg"
  srcset="large.jpg 1024w, medium.jpg 640w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Responsive image"
>

View Output Try It Yourself

📤 Output:

Common Beginner Mistake

Writing <image> instead of <img> will not display your picture.

common-mistake.html

Copy

<!-- Invalid in HTML -->
<image src="photo.jpg" alt="Photo">

<!-- Valid -->
<img src="photo.jpg" alt="Photo">

View Output Try It Yourself

📤 Output:

Only the img version renders. image is not a valid HTML tag.

🔄 Alternatives to the image Misconception

While <img> is the standard for content images, other methods exist for specific needs:

♿ Accessibility

Images must work for all users, including those using screen readers:

• Always set alt — describe the image purpose, not just the filename.
• Decorative images — use alt="" so assistive tech skips them.
• Don’t use title instead of alt — title is optional and not a substitute.
• Text in images — repeat important text in nearby HTML or alt when possible.

💡 Best Practices