Last Updated : 27 Feb, 2024
Summarize
Comments
Improve
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.
Table of Content
- HTML <figure> Tag:
- HTML <img> Tag:
- Difference between <figure> and <img> tags:
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:
Attribute Value | Description |
|---|---|
mg 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">Attributes:
Attribute value | Description |
|---|---|
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.
tag
S.No. | <figure> Tag | <img> Tag |
|---|---|---|
| 1. | 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. | The image tag is used to add an image to an HTML page. <img> tag can only insert image. |
| 2. | <figure> tag is a container tag. | <img> tag is a void tag. |
| 3. | This tag provides a container for content that is equivalent to a figure or diagram in a book. | The HTML <img> tag is used for embedding images into an HTML document. |
| 4. | This tag is inline element. | It is an inline element but when we specify width and height it becomes a block element. |
| 5. | You can use the figure element in conjunction with the figcaption element to provide a caption for the contents of your figure element. | In image tag there’s no special tag for caption rather we can use <p> tag or <span> tag to add pseudo captions. |
| 6. | It makes it easy for the machine to understand the code. Easy to get on search engines. | It is difficult for machines to understand. |
| 7. | The <figure> element itself may contain multiple other child elements be it a block of code, images, audios, video etc. | The <img> tag can not have multiple elements inside it only images can be added in <img> tag. |
| 8. | The figure tag contains default alignment and styling. | The image tag does not contain any default alignment and styling. |
codeutin
Improve
Next Article
Difference between <i> and <em> tag of HTML
