How to insert an image in HTML from a folder is one of the first basics you run into when learning web layout. If the file path is correct, the image appears right away; if it is wrong, the browser shows an empty space or a broken image icon.
The basic tag for adding images
To add an image in HTML, use the img tag. The simplest example looks like this:
<img src=”images/photo.jpg” alt=”Image description”>
The src attribute points to the file path, while alt provides a description for accessibility and for cases when the image fails to load.
How to specify the file path correctly
Images are often stored in a folder inside the project, such as images, img, or assets. In that case, the path is relative and depends on where the HTML file is located.
- If the HTML file and the image folder are on the same level: <img src=”images/photo.jpg” alt=”Photo”>
- If the image is in the same folder as the HTML file: <img src=”photo.jpg” alt=”Photo”>
- If you need to go one level up: <img src=”../images/photo.jpg” alt=”Photo”>
The main rule is simple: the browser looks for the file exactly where you tell it to. Even one extra letter in a folder or file name can break the image display.
Common mistakes that prevent an image from showing
If the image does not appear, check a few things. First, make sure the file name is spelled correctly and matches the letter case. On some servers, Photo.jpg and photo.jpg are treated as different files.
Also pay attention to the format. The most common ones are .jpg, .png, .webp, and .gif. If the file uses another extension or is corrupted, the browser will not display it.
Another frequent cause is an incorrect path. If the HTML file was moved to another folder, the old path may stop working. In that case, update the src attribute to match the new project structure.
Example of a folder structure
Imagine a simple website with this structure:
- index.html
- images
- images/photo.jpg
Then the code would look like this:
<img src=”images/photo.jpg” alt=”Photo from the images folder”>
This is a convenient option for small websites because it is easy to keep track of where files are stored and avoid confusion with nested directories.
What to remember for easier work
To avoid wasting time on small mistakes, follow a few simple habits:
- give files short, clear names without spaces;
- store images in a separate folder;
- check the file extension;
- use descriptive alt text for every image;
- after changes, refresh the page and clear the cache if needed.
Once you understand folder structure and relative paths, inserting an image in HTML from a folder becomes a routine task. It is one of the fundamentals behind clean and predictable layout work.
