Image Tags

Here we will learn about image tags of HTML.

  • <img> - The <img> tag is used to display an image in HTML page. Image is not inserted but linked to HTML page by <img> tag.
    • USAGE:-
      • <img src="imagetag.jpg" alt="image tag" height="200" width="300">
  • <map> - The <map> tag define a client-side image-map. An Image with clickable areas known as an Image-map. This tag create relationship between image and map.
    • USAGE:-
      • <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
        <map name="planetmap">
          <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
          <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
          <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
        </map>
  • <area> - This tag is used make clickable area inside an image-map. The <area> tag is used inside a <map> tag.
    • USAGE:-
      • <map name="planetmap">
          <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
          <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
          <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">

        </map>
  • <canvas> - The canvas tag is a container where you can draw a graphics by scripting. Usually JavaScript is used to draw the graphics.
    • USAGE:-
      • <canvas id="myCanvas"></canvas>
        <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(0, 0, 80, 80);
        </script>
  • <figure> - The HTML <figure> tag defines self-contained content, like diagram, illustration, code snippet, etc.
    • USAGE:-
      • <figure><img src="banana_tree.jpg" alt="banana tree" width="250" height="180"></figure>
  • <figcaption> - The <figcaption> element defines aa caption or legend for its parent <figure> element.
    • USAGE:-
      • <figure><img src="webdesign_template.jpg" alt="web design template">
            <figcaption>An elephant at sunset</figcaption>
        </figure>
  • <picture> - This tag used define multiple image with different size for multiple media using  <source> tag instead of using one image that is scaled up or down based on the viewport width.
    • USAGE:-
      • <picture>
          <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
          <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
          <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
        </picture>
  • <svg> - The <svg> tag is used to define container for svg graphics.
    • USAGE:-
      • <svg width="100" height="100">
          <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
        </svg>

More you may like to read