Image Tag


Image Tags are used to insert Image into HTML Document.

1. <img>


<img> tag defines an image in html document.

Example :


 <!DOCTYPE HTML>


<html>


<head>


<title> Image Tag Example </title>


</head>


<h1> How to insert image </h1>


<body>




<img src="Tutorialsug.jpg">


</body>




</html>


Output :

2. <map>


<.map> tag defines a client-side image-map.An image-map is an image with clickable areas.

Example :


 <!DOCTYPE HTML>


<html>


<head>


<title> Map Tag Example </title>


</head>


<h1> The map and area element in html document. </h1>

<p> click on the tutorialsug and reach the website </p>


<body>




<img src="Tutorialsug.jpg" usemap="#imap">

<map name="imap" id="#imap">

<area shape ="rect" coords="394, 292, 4, 2" href="http://www.tutorialsug.com" target="blank">

<area shape ="circle" coords="191, 143, 128" href="http://www.tutorialsug.com" target="blank">

</map>


</body>




</html>


Output :

3. <area>


<area> tag defines an area inside an image-map.

Example :


 <!DOCTYPE HTML>


<html>


<head>


<title> Map Tag Example </title>


</head>


<h1> The map and area element in html document. </h1>

<p> click on the tutorialsug and reach the website </p>


<body>




<img src="Tutorialsug.jpg" usemap="#imap">

<map name="imap" id="#imap">

<area shape ="rect" coords="394, 292, 4, 2" href="http://www.tutorialsug.com" target=blank">

<area shape ="circle" coords="191, 143, 128" href="http://www.tutorialsug.com" target="blank">

</map>


</body>




</html>


Output :

4. <picture>


<picture> tag defines a container for multiple image resources.

Example :


 <!DOCTYPE HTML>


<html>


<head>


<title> picture Tag Example </title>


</head>


<h1> The picture element </h1>



<body>

<picture>

<source media="(min-width: 850px)" srcset="tutorialsug.jpg">

<source media="(min-width: 550px)" srcset="tutorialsug.jpg">




<img src="tutorialsug.jpg" alt="logo" style="width:auto;">

</picture>


</body>




</html>


Output :