How to insert images in HTML is one of the first questions that comes up when building a page. The usual solution is the img tag, but the real task is not just showing a picture. You also need to point to the file correctly, add alternative text, and set the basic display options.
Basic img tag syntax
The simplest way to add an image to a page looks like this:
<img src="images/photo.jpg" alt="Image description">
Here, src points to the file, while alt describes what the image shows. In HTML, the img tag is a void element, which means it does not have a closing tag.
What the main attributes mean
To make an image work properly, it helps to understand a few key attributes:
- src — the path to the image file on the site or in the project folder;
- alt — the text alternative shown if the image fails to load;
- width and height — set the element’s dimensions;
- title — optional tooltip text, but it does not replace alt.
The alt attribute is especially important for accessibility and SEO. If you are unsure what to write, use a short, accurate description without extra words.
How to specify the file path correctly
The most common mistake is using the wrong image path. If the file is in the same folder as the HTML page, you can use only the file name. If the image is stored in a separate folder, the path must reflect that.
- Image in the same folder: src="photo.jpg"
- Image in the images folder: src="images/photo.jpg"
- File one level up: src="../photo.jpg"
To avoid errors, always check the letter case in the file name. On some servers, Photo.jpg and photo.jpg are different files.
How to make an image work well on a page
Once you understand how to insert images in HTML, it is worth thinking about readability and loading speed. Very large files can slow down a page, so it is better to optimize the image size before publishing.
Practical tips
- use formats that suit photos and graphics;
- do not upload images larger than necessary;
- add clear alt text;
- set fixed dimensions when needed to prevent layout shifts.
If an image is purely decorative, alt can be empty. But for content images, a meaningful description is usually the better choice.
Common mistakes to avoid
When adding images, beginners often overlook small but important details. The most common problems are an incorrect path, missing alt text, an oversized file, or a simple typo in the file name.
Another mistake is adding an image without considering responsiveness. If the page opens on a smartphone, the image should not overflow its container. CSS is often used for this, but the basic HTML markup should already be correct.
Conclusion
Now you know how to insert images in HTML: use the img tag, set src correctly, and do not forget about alt. It is a simple step, but it makes a page more visual, easier to use, and more professional.
