How to insert image in HTML is one of the most common questions for people creating their first page, editing a template, or adding an image to an email or blog. In practice, it all comes down to a single tag, but it is important to specify the file path correctly and add a description for accessibility.
Basic tag for image
In HTML, an image is inserted with the <img> tag. It is a void element, which means it does not have a separate closing tag. The simplest version looks like this:
<img src="image.jpg" alt="Image description">
Here, src tells the browser where the file is located, and alt describes what is shown in the image. This description is important for SEO, screen readers, and cases where the file does not load.
How to specify the image path correctly
Most often, the mistake is not in the tag itself, but in the file path. There are two main options:
- Relative path — when the image is stored next to the HTML file or inside a folder on the server.
- Absolute URL — when you insert the full address, for example with the domain name and file name.
If the image does not appear, check the file name, extension, and letter case. On a server, photo.jpg and Photo.jpg may be treated as different files.
What alt, width, and height mean
To make sure the image is not only visible but also works properly on the page, a few more attributes are often added.
alt— a short, meaningful description of the image.widthandheight— the image dimensions in pixels.title— a tooltip that appears on hover, but it does not replacealt.
The width and height attributes help the browser calculate the page layout faster, which reduces layout shifts while the page is loading.
Example of inserting an image in HTML
Here is a simple example you can use right away:
<img src="images/office-laptop.jpg" alt="Laptop on a desk" width="800" height="450">
If the image needs to be clickable, it is usually wrapped in a link. In that case, the image leads to a separate page, file, or enlarged version:
<a href="images/office-laptop.jpg"><img src="images/office-laptop.jpg" alt="Laptop on a desk"></a>
Common mistakes to avoid
- forgetting the
altattribute; - using the wrong file path;
- mixing up uppercase and lowercase letters in the image name;
- adding an alt description that is too long or empty;
- using a file that is too large without optimizing it.
If you are preparing a page for a website, it is better to store images in a clear folder structure and give files short names without spaces. This makes maintenance easier and reduces the risk of errors.
When it makes sense to use other methods
For modern layouts, additional solutions are sometimes needed: responsive images, <picture> for different screen sizes, or lazy loading for deferred loading. But if your goal is simply to understand how to insert an image in HTML, the basic <img> tag covers most simple use cases.
Start with the correct src, add a meaningful alt, and check the file path — that is already enough to make the image work reliably on the page.
