HTML Image

Image - <img> tag

The <img> tag is used to place an image on the web page.

This tag does not contain closing tag.

src is one of the attribute, it is mandatory and is used to specify the image path.

Syntax

<img src="image_url">

Example

Try Yourself

width and height attribute in <img> tag

These attribute are used to change the size of the images, it is not mandatory to specify. But it is highly recommended to use.

It doesn't change the images original size, but changes the size only when displaying on the web page.

Example

Try Yourself

No stretched image

If you set anyone of the width or height attribute value, the image will not stretch.

Example

Try Yourself

alt Attribute in <img> tag

alt(alternative) attribute is used to show a tooltip if the path of the image or image name given is incorrect.

Search engines, search and retrieves the image by the alt attribute value.

Example 1

Try Yourself

When an image path is incorrect, instead of the image the alt attribute value will be displayed.

In the following example, wrong image path is given, so instead of the original image an broken image icon is displayed along with the alternate text (This is the butterfly image).

Example 2

Try Yourself

HTML image link

We can create a image link using <a> tag and <img> tag

Already we have seen about the <a> tag in previous chapter.

You can just write the <img> tag inside the <a> tag.

Example

Try Yourself

<img> element inside <figcaption> tag

The <figcaption> tag is used to specify a title or caption for a image.

The <figcaption> tag is written inside the <figure> tag.

Example

Try Yourself