HTML Images: The img Tag, Alt Text, and File Paths Explained

Images go in with a single tag, <img>, and the only thing that changes based on where the image actually lives is one attribute: src. Point src at a file in your own project and you're using a relative path; point it at a full URL somewhere else on the internet and you're using an absolute one.

This is the written version of my images and file referencing video, part of my HTML beginners course. It's embedded near the top.

Key Takeaways

• <img> is self-closing. It has no separate closing tag.
• src points to the image file, width and height set its size, and alt describes it for accessibility and search engines.
• A relative path (leaves.jpg, images/leaves.jpg) points to a file in your own project. An absolute path (https://...) points somewhere else on the internet.
• Give width without height (or vice versa) and the browser scales the other dimension automatically instead of stretching the image.
• alt text isn't optional decoration. It's what screen readers announce and what shows up if the image fails to load.

The img tag and its attributes

<img> takes a src, and usually width, height, and alt alongside it.

<img src="leaves.jpg" width="640" height="426" alt="Fall leaves">

• src is the file the browser loads.
• width and height set the image's rendered size in pixels.
• alt is a text description. Screen readers read it aloud, search engines use it to understand what the image shows, and browsers display it if the image can't load.

There's no closing </img> tag. <img> is one of the handful of self-closing HTML elements, alongside <meta> and <br>.

Relative paths

A relative path points to a file relative to the HTML file it's referenced from. If leaves.jpg sits in the same folder as your page, you just use the filename:

<img src="leaves.jpg" width="640" height="426" alt="Fall leaves">

Move that image into a subfolder called images, and the path has to include the folder name too:

<img src="images/leaves.jpg" width="640" height="426" alt="Fall leaves">

Get the path wrong, whether that's a missing folder name or a typo in the filename, and the browser shows a broken image icon instead of your picture. The path is relative to where the HTML file lives, not to your desktop or your project root.

Absolute paths

An absolute path is a full URL to an image hosted somewhere else entirely:

<img src="https://images.unsplash.com/photo-example" width="640" alt="Pumpkin pie">

This works, but it comes with a real tradeoff: you don't control that file. If the site hosting it changes the URL, takes the image down, or goes offline, your <img> breaks with it. For anything you're actually shipping, download the image and reference it as a relative path instead. Absolute paths are the right call when you're intentionally pulling in someone else's hosted asset, not a shortcut to skip saving a file.

Getting width and height right

Set both width and height and they need to match the image's actual aspect ratio, or the picture comes out stretched or squashed. If you're not sure of the exact height, you can leave it off entirely:

<img src="pumpkin-pie.jpg" width="640" alt="Pumpkin pie">

Browsers preserve the image's natural aspect ratio when you give only one dimension, so it scales correctly without any distortion. That also happens to be good practice beyond just avoiding a warped picture: reserving the right amount of space for an image before it loads is what keeps the rest of the page from jumping around as images pop in, something search engines and real users both notice.

See MDN's img element reference for the rest of the attributes <img> supports, including responsive images with srcset.

Where to go next

Images pair naturally with HTML Iframes for embedding other kinds of external content, and with HTML Forms if you're building a page that needs both media and input. From here, the course moves into tables and forms.

FAQ

Does the img tag need a closing tag?

No. <img> is self-closing, like <meta> and <br>. There's no </img>.

What's the difference between a relative and absolute image path?

A relative path points to a file in your own project, relative to the HTML file referencing it (leaves.jpg, or images/leaves.jpg for a subfolder). An absolute path is a full URL to an image hosted elsewhere on the internet.

Should I always set both width and height?

Setting both is fine as long as they match the image's real proportions. If you only know one dimension, set just that one. Browsers will scale the other dimension to match the image's natural aspect ratio instead of distorting it.

Why does my alt text matter if the image loads fine?

Screen readers read alt text aloud for visitors who can't see the image, and search engines use it to understand what the image shows since they can't "look" at it either. It also becomes visible text if the image ever fails to load.

Why did my image show up broken?

Almost always a path problem: a typo in the filename, a missing folder name in the path, or a wrong file extension. Double-check the path matches exactly where the file actually sits relative to your HTML file.