Insert image in HTML document, man working on a laptop, infographic

To insert an image in your HTML document, add a <img> tag and input the file path into the src attribute. Also, adding an optional alt attribute is a best practice that I will discuss more later in this post.

<img src="./assets/images/flower.jpg" alt="Rose">

No matter if it’s a live website or if you’re working locally on your computer, the ultimate process is the same for inserting images into your HTML document.

However, if this guide looks complex at any point, don’t worry because I will also show you everything in action in the video instructions.

How to insert an image in HTML?

Specify the image path in the <img> tag. This way you can insert an image in HTML.

<img src="name_of_the_image.jpg" alt="picture">

In the above HTML (src), it’s a relative path.

Also, the image could be an absolute path as you see in the example below.

<img src="" alt="Bulb">

The image path (link) may be different depending on your folder structure. Otherwise, the rest of the thing is the same for everyone. Let’s face it!

1. Upload the image to your project folder

If you’re working on a live website, upload the image to your hosting. But if you’re working locally (computer), store the image in a folder.

2. Specify the image path & name in <img> tag

Open your HTML file in a code editor and insert the image link within a <img> tag. See the example below:

<img src="" alt="bulb">

<!-- OR (if you working locally, use the below structure) -->

<img src="assets/light-bulb.jpg" alt="bulb">

From the above example, you see that the <img> tag contains an src attribute. And you have to paste the image link into the src attribute.

How you will get the image link (live host): If you’re working on a live website, follow this. Let’s say you uploaded the image to a folder called “images” so the image link will be “” See the video for more clarification (below):

How you will get the image path for your local project: If you’re working on your computer, follow this. Let’s say you uploaded the image in a folder called “assets” so the image path will be “assets/name_of_the_image.jpg” See the video instruction below:

Finally, you got the image link (path)!

Specify the image path and image name (including extension e.g. jpg/png) in the same manner as you see in this example.

3. Save your HTML file

It’s a good practice to fill out the “ALT” value in the <img> tag. In the above example, you see that the “ALT” value is “BULB.” So the search engines will understand that it’s an image of a bulb.

Also, if the image breaks or doesn’t load for any reason, the visitors will see the text (bulb).

But if you don’t give it an “ALT” value, it will not cause any error. But it’s good to have it there.

Save your file and see your webpage in a browser.

And this brings me to the end of this post.

Learn more about images

Learn & practice CSS with real-world examples
Learn basic CSS from the ground up.
Build real projects in HTML CSS.
Make your hands dirty

Build HTML CSS projects

About us templatePreview
Team pagePreview
Testimonial pagePreview
Testimonial sliderPreview
Contact pagePreview
Multipage websitePreview
Portfolio websitePreview
Animated portfolioPreview
Computer science portfolioPreview
Navigation bar (without JS)N/A
Create a hamburger menuPreview
Create a navigation menu in two waysN/A
Footer templatesPreview
Hero bannerPreview
Background sliderPreview
Card templates (HTML, CSS)Preview
Animated cardsPreview
Three-column layout templatePreview
Two column layoutPreview
Breadcrumb navigationN/A
Progress bar templatePreview
Thank you pagePreview
Resume templatePreview


Now you know how to insert an image link/path in an HTML document. This post could be even shorter but I tried to cover everything related. So it can serve everyone’s purpose even for troubleshooting.

I also included videos and showed you how you can add an image to your web page if it’s a live server/hosting. But if you still have any questions, please let me know.