HTML Image Tag Example

Hello friends, this tutorial is about HTML <img> (image) tag. To display/show image in the webpage then we have to use <img> tag of HTML. Here you can find all required attributes of <img> tag and some tips for image optimization.

HTML Image Tag Example

Syntax:

<img src="" alt="" />

"src" and "alt" attributes are important in image tag.

There are following important attributes list of image tag:

• src
• alt
• height
• width

To Read Form Tag. Click Here

To Read Table Tag. Click Here

src attribute:

Src stands for Source and contains value of image path.

For example, if your webpage is saved in some "xyz" directory/folder and image is also in same folder then you have to write following code to display image. Here "allcodetips.jpg" is a image file name, your image file name can be different.

Example:

<img src="allcodetips.jpg" />

If your webpage is saved in "xyz/" directory and image is stored in "xyz/img/" directory then you have to use following code:

Example:

<img src="img/allcodetips.jpg" />

alt attribute:

Alt attribute is second most useful attribute. Alt attribute contains text message and this text message is displayed when image is not display. In short when image is not possible to display at that time alt attribute's value is displayed.

Second use of alt attribute is SEO (Search Engine Optimization) because Search Engine crawler does not crawl images, so crawler crawls src and alt attributes' value.

So always use alt attribute for better Search Engine Optimization.

Example:

<img src="allcodetips.jpg" alt="All Code Tips" />

height attribute:

Height attribute specifies height of image. You can provide height value like 100, 250, 500, etc as your requirement.

Example:

<img src="allcodetips.jpg" alt="All Code Tips" height="250px" />

width attribute:

Width attribute specifies width of image. You can provide percent value to the width attribute like width="100%". You can also provide pixel value to the width attribute.

Example:

<img src="allcodetips.jpg" alt="All Code Tips" width="250px" />

Conclusion:

HTML image tag contains many other attributes, but above listed attributes are most common. You can use events in image tag using onmouseover, onclick, onmouseout, etc.

If you find any difficulty then comment below.