Difference between <figure> & <img> tags in HTML - GeeksforGeeks

02 Sep, 2021
In this article, we will learn about the <figure> & <img> tag along with its implementation. We will also learn the differences between them. Let’s begin the discussion with the figure tag in HTML.
HTML <figure> Tag: The <figure> tag in HTML5 is used to add self-contained content like illustrations, diagrams, photos, or codes listing in a document. It is related to the main flow, but it can be used in any position of a document and the figure goes with the flow of the document and if remove it then it should not affect the flow of the document. In simple words, the figure tag is used to semantically organize the content of images, videos, audios or even charts or tables, block of codes in the HTML document.    
Syntax: 
<figure>
    <img src="url">
    <figcaption>content</figcaption>
</figure>
Attributes: It contains mostly two tags which are given below: 
img src: This tag is used to add an image source in the document.
figcaption: This tag is used to set the caption to the image. It is optional to use.
Example: This example illustrates the use of the <figure> tag along with src, width, height & alt attributes.
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport"          content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      figure {        border: 2px solid black;        padding: 5px;      }    </style>  </head>     <body>    <figure>      <img src="https://media.geeksforgeeks.org/wp-content/uploads/20210827151326/gfg-200x200.png"        alt="image"        width="200px"        height="200px"/>      <figcaption>Geeks For Geeks</figcaption>    </figure>  </body></html>
Output:  In this case the <figure> tag, it has made all the changes, as the image with caption is properly aligned with some space away from the margin. The image and caption are part of each other. The border is added to both <figure> tag and <figcaption> tag, both have occupied the border.  <figure> tag is inline element.
<figure> tag
HTML <img> Tag: HTML <img> tag is used to add image or to set the background in the webpage/website. Nowadays website does not directly add images to a web page, as the images are linked to web pages by using the <img> tag which holds space for the image.
Syntax : 
<img src="url" alt="some_text">
Attribute: It contains the following attribute values:
src: It is used to specifies the URL path of the source image.
alt: It is used to specifies an alternate text for the image if the image for some reason cannot be displayed.
Example: In this example, we are using the <img> tag along with src, width, height, and alt attributes.
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible"          content="IE=edge" />    <meta name="viewport"          content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      img {        border: 2px solid black;        padding: 5px;      }    </style>  </head>  <body>    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20210827151326/gfg-200x200.png"      alt="image"      width="200px"      height="200px"/>     <p>Geeks For Geeks</p>    </body></html>
Output: In the case of the <img> tag, it is not properly aligned and is very close to the margin, and the caption is away from the image. The image and caption are not part of each other. The border is not the part of both image and caption. <img> tag is an inline element but when we specify width and height it becomes a block element.
<img> tag
Difference between <figure> & <img> tags:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
nitupandel001
HTML-Questions
HTML-Tags
Picked
Difference Between
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Difference Between Method Overloading and Method Overriding in Java
Difference between Prim's and Kruskal's algorithm for MST
Difference between Internal and External fragmentation
Difference between Mealy machine and Moore machine
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?