How To Add Images in HTML Page-Part 1

This post will explain how to add images in your html page and render it accessible for users. In this part, we will add images to our html page via url link.

Apr 11, 2025

Introduction

We will learn how to add images linked to a source on your html page and it is interesting to create a page filled with images so read the whole post to understand how to do this.

How To Get An Image from Online Free Websites

Browse the free website called pexels.com where you can copyright free pictures to download or use their source url to insert for this purpose. You don’t even need to sign up for an account to browse free images here on this website! After selecting a picture, right click on the image that you selected there and click on open in a new tab, then, just select the url until the jpg and copy the url source. For example, I found a beautiful image from pexels , it is an Italian hill picture and the full source url when opened in the new tab is

“https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2” but I only highlighted this much from it : “https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg”

Note that I only highlighted the url until where it stops at jpeg.

Coding in HTML to view the picture on the page

Write the small heading h2 with the open and closed h2 tags, then below that write the img tag which is written as <img/> Note that this img tag is self closing and does not need another closed img tag unlike other tags. The self-closing img tag is written as <img />

Now, you need to insert an image inside this image tag and for this we copy the url from the image site that I explained how to do above, and then just insert this url inside the image tag as follows:

<img src="https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg"  />

We write src that stands for source, that is image source and then src = and after the “=” or “equal to” sign , we paste the url link that we copied from the pexel website. This is for practice that we chose the pexels free site, you may choose any other site from which you can copy the image url. . Next, we write the alt attribute inside the img tag to provide alternative information about the image that we inserted. I will be writing a detailed post on alt attribute in another post in the coming weeks.

After including the alt attribute, the img tag information here looks like this :

<img src="https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg" alt="Italian hills" />

The full HTML Code for this exercise

<h1> Inserting Image in Your HTML Page</h1>

<h2>Italian hills</h2>

<img src="https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg" alt="Italian hills" />

Conclusion

If you like to see the source code above in a code editor here is the link to my codepen source code so that you could view the html page that we created and using this as a guide line, you could create your own html page following the above code but with a different image. Looking forward to it!

In this part, we learnt how to add any image/s to our html page by adding a url link from images available online or it could be some image that we have uploaded to some website or blog . In the next post, we will learn, how to add images to our html page by inserting it from our computer file source, meaning, some images that we have saved to our computer files. Since it is slightly different, I decided to add the details in part 2 of this post in the coming week.

Happy coding in HTML.

Buy Me Coffee