The most direct way to display an image in HTML is with the <img> tag, which uses the src attribute to point the browser to the image file. It’s a self-closing tag with no separate closing element, and getting it right just takes a handful of key attributes.
The Basic Syntax
The core structure looks like this:
<img src="image-url" alt="alternate text">
The src attribute stands for “source” and refers to the location of the image file, while the alt attribute provides alternate text describing what the image shows. It’s important to understand that images aren’t technically embedded directly into the HTML file itself — they’re linked to the page by referencing their file location, and the <img> tag simply creates a placeholder where the browser fetches and displays that referenced file.
A working example looks like this:
<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">
Two Ways to Reference an Image
You can point the src attribute at an image in two different ways, depending on where the file lives:
- A full URL, for an image hosted elsewhere online (for example,
https://example.com/images/photo.jpg)
- A relative file path, for an image stored alongside your HTML file (for example,
images/photo.jpg if it’s in a subfolder relative to the page)
Step-by-Step Process
If you’re adding an image to a live website rather than just a local test file, there are a few more steps worth following in order.
- Get the image ready and uploaded. Before you can reference an image in code, it needs to exist somewhere with a direct, web-accessible URL — this usually means uploading it to your server or media library first.
- Open the file where the image should appear. This could be a plain HTML file or a theme template file, depending on your setup.
- Write the
<img> tag with the src attribute. This tells the browser exactly where to find the image.
- Set width and height. Defining these dimensions helps prevent your page layout from shifting around as the image loads in.
- Add the
alt attribute. This describes the image for screen readers and search engines, and it’s essential for accessibility.
- Save and test. Confirm the image actually displays correctly once the file is live.
Making an Image Clickable
To turn an image into a link, nest the <img> tag inside an <a> tag:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
The href attribute on the surrounding <a> tag sets the destination URL, while the <img> tag inside handles the actual image display. If you’re using an image as a clickable link, you still need to provide accessible link text — either inside the same <a> element, or via the image’s alt attribute — so that screen reader users understand where the link leads.
Positioning Images With CSS
By default, an image behaves like inline content, but you can control its placement relative to surrounding text using the CSS float property:
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
Swapping float:right for float:left moves the image to the opposite side instead.
Why the Alt Attribute Matters
It’s tempting to skip the alt attribute, but it plays several important roles at once:
- It displays fallback text if the image fails to load for any reason.
- It helps users on slow connections who might not wait for images to fully render.
- It’s essential for screen readers, making your content accessible to visually impaired users.
Common Mistakes to Avoid
- Skipping the
alt attribute entirely, which hurts both accessibility and SEO.
- Forgetting width and height, which can cause layout shift as the page loads and images pop in.
- Using a broken or incorrect file path, since even a small typo in
src will prevent the image from displaying at all.
- Hotlinking to images on servers you don’t own or have permission to link to, which can break unexpectedly if the source removes or moves the file.
Join The Discussion
Have you run into any tricky spots while adding images to your own HTML projects — broken paths, layout shift, or accessibility issues you had to fix? Share what your typical workflow looks like for optimizing and referencing images, and if you’ve used the CSS background-image property instead of the <img> tag for certain cases, it’d be great to hear when you reach for one approach over the other.
