HTML HTML Tutorial HTML Forms HTML Graphics HTML Media HTML APIs HTML Tags



HTML Tag: img

The HTML tag <img> is used to embed images in a web page. It is a self-closing tag, which means it does not require a closing tag. The <img> tag is one of the most commonly used tags in HTML, as images are an essential part of any web page.

The <img> tag has several attributes that can be used to specify the source of the image, its size, and other properties. Let's take a look at some of the most commonly used attributes:

  • src: This attribute specifies the URL of the image to be displayed. It is a required attribute.
  • alt: This attribute specifies an alternate text for the image, which is displayed if the image cannot be loaded or if the user is using a screen reader.
  • width: This attribute specifies the width of the image in pixels.
  • height: This attribute specifies the height of the image in pixels.
  • title: This attribute specifies a title for the image, which is displayed as a tooltip when the user hovers over the image.

Here is an example of how to use the <img> tag:

<img src="image.jpg" alt="A beautiful sunset" width="800" height="600" title="Sunset">

In this example, we are displaying an image called "image.jpg" with a width of 800 pixels and a height of 600 pixels. The alternate text for the image is "A beautiful sunset", and the title is "Sunset".

The <img> tag can also be used to create image maps, which are clickable areas on an image that link to different pages or sections of a web page. To create an image map, you need to use the usemap attribute and specify the name of the map. You also need to use the <map> tag to define the clickable areas and their destinations.

Here is an example of how to create an image map:

<img src="map.jpg" alt="Map of the world" usemap="#worldmap">

<map name="worldmap">
  <area shape="rect" coords="0,0,100,100" href="northamerica.html" alt="North America">
  <area shape="rect" coords="100,0,200,100" href="southamerica.html" alt="South America">
  <area shape="rect" coords="0,100,100,200" href="europe.html" alt="Europe">
  <area shape="rect" coords="100,100,200,200" href="asia.html" alt="Asia">
</map>

In this example, we are displaying an image called "map.jpg" and creating an image map called "worldmap". The image map has four clickable areas, each defined by the <area> tag. The shape attribute specifies the shape of the clickable area (in this case, a rectangle), and the coords attribute specifies the coordinates of the area. The href attribute specifies the destination of the link, and the alt attribute specifies the alternate text for the area.

The <img> tag is a powerful tool for displaying images on a web page. With its various attributes and the ability to create image maps, it allows web developers to create visually appealing and interactive web pages.

Code Examples

Here are some code examples of how to use the <img> tag:

Basic Image

<img src="image.jpg" alt="A beautiful sunset">

Image with Width and Height

<img src="image.jpg" alt="A beautiful sunset" width="800" height="600">

Image with Title

<img src="image.jpg" alt="A beautiful sunset" title="Sunset">

Image Map

<img src="map.jpg" alt="Map of the world" usemap="#worldmap">

<map name="worldmap">
  <area shape="rect" coords="0,0,100,100" href="northamerica.html" alt="North America">
  <area shape="rect" coords="100,0,200,100" href="southamerica.html" alt="South America">
  <area shape="rect" coords="0,100,100,200" href="europe.html" alt="Europe">
  <area shape="rect" coords="100,100,200,200" href="asia.html" alt="Asia">
</map>

References

Activity