Javatpoint Logo
Javatpoint Logo

How to Insert Image in HTML

If we want to insert an image in the HTML document to show the image on a web page, we have to follow the steps which are given below. Using these steps, we can easily add or insert an image in the document.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to insert the image.

Step 2: Now, move the cursor to that point where we want to insert an image. And then, type the empty <img> tag at that point.

Step 3: Now, we have to add the attribute of image tag whose name is "src". So, type the src attribute within the <img> tag.

Step 4: After that, we have to give the path of the image we want to insert. So, type the path of the image in the src attribute. If our image is stored in the same directory in which our HTML file is store, then type the following path:

<img src="filename.extension">

If our image is stored in any other directory then type the correct path of that image, so that the browser can read the image easily as described in the following block.

If our image is on the internet, then we can also add the image by using URL, as given in the following screenshot.

Step 5: After that, we can also set the width and height of that image by using two different attributes as shown in the following block:

Step 6: At last, we have to save the following Html file or Html Code in the text editor. 

Test it Now

The output of the above code is shown in the following screenshot:

How to Insert Image in HTML

Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA