HtmlHow-ToBeginner · 3 min read

How to Add Image in HTML: Simple Guide with Examples

To add an image in HTML, use the <img> tag with the src attribute pointing to the image URL or file path. You should also include the alt attribute to describe the image for accessibility and SEO.

📐

Syntax

The <img> tag is used to add images in HTML. It has two main attributes:

src: Specifies the path or URL of the image file.
alt: Provides alternative text describing the image, important for screen readers and when the image cannot load.

The <img> tag is self-closing and does not need a closing tag.

html

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

Output

Displays the image located at 'image.jpg' with alternative text 'Description of image' if the image cannot be shown.

💻

Example

This example shows how to add an image from a URL with descriptive alternative text. The image will appear on the webpage.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Example</title>
</head>
<body>
  <h1>My Favorite Animal</h1>
  <img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="Transparent PNG example" width="300">
</body>
</html>

Output

A webpage with a heading 'My Favorite Animal' and a 300px wide transparent PNG image below it.

⚠️

Common Pitfalls

Common mistakes when adding images include:

Forgetting the alt attribute, which hurts accessibility.
Using incorrect or broken src paths, causing the image not to load.
Not specifying image dimensions, which can cause layout shifts.
Using deprecated tags like <image> instead of <img>.

html

<!-- Wrong: missing alt attribute -->
<img src="photo.jpg">

<!-- Right: includes alt attribute -->
<img src="photo.jpg" alt="A beautiful scenery">

Output

The first image may not show alt text if it fails to load; the second image provides descriptive text for screen readers and fallback.

📊

Quick Reference

Attribute	Description	Example
src	Path or URL of the image file
alt	Alternative text describing the image
width	Width of the image in pixels or %
height	Height of the image in pixels or %
title	Tooltip text shown on hover

✅

Key Takeaways

Use the tag with src and alt attributes to add images in HTML.

Always include alt text for accessibility and SEO benefits.

Check that the src path is correct to avoid broken images.

Specify image size attributes to improve page layout stability.

Avoid deprecated tags and always use semantic HTML.