What do you mean when you say an image is in the same directory as the HTML file?

When working on a real project, you might organize your files like this:

website
│── home
│   │── index.html
│   │── banner.png

Here, website is the root folder, and it contains another folder called home. Inside home, both index.html and banner.png are stored in the same location.

When we say "the image is in the same directory as the HTML file", we mean that both files exist within the same folder.

Now, inside index.html, you can easily reference banner.png like this:

This tells the browser to look for banner.png in the same folder as index.html.