HTML Image Tag: How to Add Media Images in Webpage

HTML image tag is used to show images in a webpage. This is a multimedia element HTML allow us using <img>

Syntax

Example

Test it Live

Output

HTML image

List of HTML image tag attributes

Sr. No. image attributes Description
1 src Used to get the url location of the image from where we get the image.
2 alt Used to show alternative text when the server not able to find the image in the given location.
3 width Used to define the width of image.
4 height Used define the height of the image.

HTML image with alt attribute

If you want to insert an image and your image is not located in the given location. You need to show alternate text if the image not found in the given location.

Test it Live

Output

HTML image

image with width attribute

If you want to give the width to an image you have to use width attribute.

Test it Live

Output

HTML image

image with height attribute

If you want to give the height to an image, you have to use width attribute.

Test it Live

Output

HTML image

Use anchor tag with image tag

If you want to open image on image click, you have to use anchor tag.

Test it Live

Output

HTML image

Image Map

An image map is used to give each image area a link to open on click. Each area contains a link and you open the link on clicking that area. HTML area tag using here to give area of map. A mapping can be done by using <map> tag. See HTML map tag for more details.

The name attribute of map tag and the usemap attribute of image tag with map name with # is used to make relationship between image and mapping.

Test it Live

Output

HTML image

paragraph paragraph paragraph