HTML <img> Tag

What You’ll Learn

By the end of this tutorial, you’ll embed images in HTML using the <img> element with proper attributes, responsive techniques, and accessibility.

The <img> tag is a fundamental HTML element for displaying photos, icons, logos, and illustrations. This guide covers syntax, attributes, common patterns, and best practices for beginners and web developers alike.

What Is the <img> Tag?

The image element (<img>) embeds an image into an HTML document. It is a void (empty) element — it does not wrap content and has no closing tag in HTML syntax.

Attributes such as src, alt, width, and height tell the browser where to fetch the file, how to describe it for accessibility, and how much space to reserve on the page.

📝 Syntax

Include an img element with src pointing to the image file and alt describing its content:

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

Syntax Rules

• img is a void element — no </img> closing tag in HTML.
• src is required (unless using lazy-loading placeholders with data-src patterns).
• alt is required for accessibility — use alt="" only for purely decorative images.
• Set intrinsic width and height to reduce cumulative layout shift (CLS).
• Prefer modern formats (WebP, AVIF) via picture when you need fallbacks.

⚖️ <img> vs <image>

Only one of these is valid for HTML page content:

⚖️ <img> vs CSS background-image

Choose based on whether the image carries semantic meaning:

Examples Gallery

Single images, clickable thumbnails, and responsive patterns with copy-ready code and live previews.

Live Preview

Standalone image embedded with the img element:

Displaying Single Images

The primary use of <img> is to display standalone images within page content.

displaying-single-images.html

Copy

<p>Check out this logo:</p>
<img src="/images/javascript.png" alt="JavaScript logo" width="128" height="128">

View Output Try It Yourself

📤 Output:

Check out this logo:

📚 Common Use Cases

Use <img> for logos, product photos, avatars, diagrams, and icons. Wrap in <a> for clickable thumbnails, or in <figure> when a caption is needed.

Image Links

Turn an image into a clickable link by wrapping the img element with an a anchor tag.

image-links.html

Copy

<a href="/html">
  <img src="thumbnail.jpg" alt="Go to HTML tutorials">
</a>

View Output Try It Yourself

📤 Output:

Click the image to navigate.

Responsive Images

Ensure images scale properly across devices with srcset, sizes, and CSS.

responsive-images.html

Copy

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

View Output Try It Yourself

📤 Output:

♿ Accessibility

Images must be usable for everyone, including assistive technology users:

• Meaningful alt text — describe purpose and content, not just “image” or the filename.
• Decorative images — use alt="" so screen readers skip purely visual decoration.
• Linked images — alt should describe the link destination, not just the picture.
• Text in images — repeat critical text in HTML or alt when possible.
• Contrast and size — ensure icons and UI images remain visible and tappable on mobile.

💡 Best Practices