The basic HTML tag for images

To add an image to a web page, you use the <img> tag. Unlike most HTML tags, the <img> tag does not have a closing tag — it stands alone. The tag requires at least one piece of information: the src attribute, which tells the browser where to find the image file.

Here is the simplest working example:

<img src="photo.jpg">

When a browser reads this line, it looks for a file named photo.jpg in the same folder as the HTML file. If it finds the file, it displays the image. If the file is missing or the path is wrong, the browser shows a broken image icon instead.

Key Takeaways

  • The <img> tag requires a src attribute that points to the image file location.
  • Always include an alt attribute with a text description of the image, which helps people using screen readers and appears if the image fails to load.
  • Image file paths can be relative (pointing to a file in your project folder) or absolute (a full web address starting with http or https).
  • The width and height attributes let you control how large the image appears on the page.

Writing the src attribute correctly

The src attribute is a file path. It can point to a file on your own computer or to an image hosted on another website. The way you write the path depends on where the image lives.

If your image is in the same folder as your HTML file, use just the filename: <img src="sunset.png">. If the image is in a subfolder called images, write: <img src="images/sunset.png">. If you want to go up one folder level and then into an images folder, use: <img src="../images/sunset.png">. The two dots mean "go up one level."

You can also link to an image anywhere on the internet by using its full web address: <img src="https://example.com/images/photo.jpg">. When you do this, the browser downloads the image from that website every time someone visits your page. This works, but it means your page depends on that other website staying online.

Adding the alt attribute for accessibility and reliability

The alt attribute holds a text description of the image. Write it as if you were describing the image to someone who cannot see it. This description appears if the image fails to load, and it is read aloud by screen readers that people with vision loss use to browse the web.

Here is an example with both src and alt:

<img src="dog-playing.jpg" alt="A golden retriever running through grass">

Keep the alt text brief but specific. "Image" or "photo" tells the reader nothing. "A golden retriever running through grass" tells them what they are looking at. If the image is purely decorative and adds no information to the page, you can leave the alt attribute empty: <img src="divider.png" alt="">. This tells assistive technology to skip over it.

Controlling image size with width and height

By default, images display at their full size. You can make them smaller or larger using the width and height attributes. Both take a number followed by a unit — usually pixels (px) or a percentage.

Here are three common approaches:

  • <img src="photo.jpg" width="300" alt="description"> — Sets the width to 300 pixels. The browser automatically shrinks the height to keep the image from looking stretched.
  • <img src="photo.jpg" width="50%" alt="description"> — Makes the image 50 percent as wide as its container. This is useful on mobile phones, where you want images to fit the screen.
  • <img src="photo.jpg" width="300" height="200" alt="description"> — Sets both width and height. Use this only if you want to force a specific shape; otherwise, set only one and let the browser calculate the other.

If you set both width and height to different proportions than the original image, the image will look stretched or squashed. Most developers set only the width and let the height adjust automatically.

Putting it all together in a complete example

Here is a realistic image tag that includes all the important pieces:

<img src="images/team-photo.jpg" alt="Five team members standing in front of an office building" width="600">

This tag tells the browser: look for a file called team-photo.jpg in the images folder, display it 600 pixels wide, and if the image does not load, show the text "Five team members standing in front of an office building" instead. Someone using a screen reader will hear that description.

You can place this tag anywhere inside the <body> of your HTML file — between paragraphs, inside a list, or inside a <div> container. The browser will display the image wherever you put the tag.

Common mistakes and how to avoid them

The most common error is a broken file path. If you write <img src="photo.jpg"> but the file is actually in a folder called images, the browser will not find it. Always double-check that the path matches your actual folder structure. Use forward slashes (/) in paths, even on Windows — HTML expects forward slashes.

Another mistake is forgetting the alt attribute. This hurts people using screen readers and makes your page less useful when images fail to load. Every <img> tag should have an alt attribute, even if it is empty.

A third mistake is linking to images on other websites without permission. While the image will display, you are using that website's bandwidth and the image may disappear if the website changes or removes it. For images you plan to use regularly, read them and store them in your own project folder.

Frequently Asked Questions

What image formats work in HTML?

The most common formats are JPG (good for photographs), PNG (good for graphics and images that need a transparent background), and GIF (good for straightforward animations). Modern browsers also support WebP, which is smaller and faster. You can use any of these by writing the filename in the src attribute.

Can I make an image clickable?

Yes. Wrap the <img> tag in an <a> tag: <a href="page.html"><img src="photo.jpg" alt="description"></a>. When someone clicks the image, they go to the page you specified in the href attribute.

What happens if the image file is very large?

The page will load slowly because the browser has to read the entire file. Use an image editor to make the file smaller before you add it to your project. Smaller file sizes mean faster pages and happier visitors.

Do I need to close the img tag?

No. The <img> tag is self-closing, meaning it does not need a closing tag like </img>. Some people write <img src="photo.jpg" /> with a slash at the end, but modern HTML does not require it.