HTML Images – How to Insert Images in HTML with Examples


A web page look very beautiful with images or in other words web page is incomplete without images.

In this tutorial we will explain how to insert images in HTML document. To insert a image in a web page use <img> tag. Remember , <img> tag has no ending tag.

Syntax of Image Tag

<img src=”Source of Image with Extension“>

Source Attribute of Image tag

Source tells the browser from where the image will be loaded. Source can be the location of the image locally stored on disk/server or a link to an image located on other server/website. Suppose You are working on a local computer than source may be look like this <img src = “desktop/new.jpg“> or if you want to place an image then you can write <img src = “link with extension“>

Extensions of Images

An extension tells about the type of the image. Image has different types like JPEG , PNG. There are many image extensions for example JPG , PNG , GIF etc. You have to write image extension at the end of image name. You can check extension of image by checking image property. See Screen Shot below.

Image Extension

Image Width and Height

You can set image height and width in image tag. Just add these two attributes in image tag.

<img src=”source with extensionwidth=”width of imageheight=”height of image“>

See Example


Image tag in HTML


Image tag output

Setting Border of Image in HTML

You can set border of an image in HTML. Just insert a border attribute in image tag.

<img src=”sourceborder=”border size“>

Example of Image border


image border in HTML


image border output

Title of Image in HTML

You can set a title of an image so that if someone hover ( bring mouse at image ) can see what is this image about.

Example of Image Title


image title in HTML


Alt Attribute in Image Tag

You can set an alternative text on image so that if your image is not available people can see the alternative text. Note that the alternative text will be shown only if the image link is broken , image name has been changed or image is not available. See Example below.


image alt attribute


image alt output




Please enter your comment!
Please enter your name here