Explain the use of figure tag in HTML5
Last Updated :
24 Aug, 2021
In HTML, the <figure> tag is used to include self-contained information such as illustrations, diagrams, photographs, or code listings in a document. It is linked to the main flow, but it may be used at any place of a document, and the figure flows with the content, thus removing it should not impact the flow of the document. HTML5 includes a new tag for this purpose. Because the <figure> element is a sectioning root, the outline of its content is removed from the page's main outline.
Use of Figure tag: To embed an image in an HTML page, use the <img> element. Images are linked to web pages rather than being placed into them. The <img> element generates a placeholder for the specified image. The <figcaption> element is used to give a picture a caption. It is an optional tag that can come before or after the tag's content. Although the element itself may include several additional components such as or, only one element may be nested within a tag. The element is used with the element, and it might be the element's first or last child. A <figure> is often a picture, illustration, diagram, code snippet, or another item that is referenced in the main flow of a document but may be relocated to another portion of the text or an appendix without disrupting the main flow. The outline of the content of the <figure> element is omitted from the main outline of the page since it is a sectioning root. A caption can be connected with the <figure> element by putting an <figcaption> as the first or final child inside it. The figure's caption is given as the first <figcaption> element found in the figure.
Syntax:
<figure>
<img src="....">
<figcaption>.......</figcaption>
</figure>
Parameters:
- img src: This tag is used in the document to include an image source.
- figcaption: This element is used to specify the image's caption.
Example 1: In this example, to mark up a geeksforgeeks image in a document, we will use the <figure> element and the <figcaption> element to specify a caption for the image.
HTML
<!DOCTYPE html>
<html>
<head>
<title>geeksforgeeks</title>
</head>
<body>
<figure>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210823163000/1.png"
alt="gfg" width="320" height="250">
<figcaption>
GeeksforGeeks | A computer science portal for geeks
</figcaption>
</figure>
</body>
</html>
Output:
Example 2: In this example, we will use a figure tag with multiple images nested within a single <figure> element with a single caption.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<figure>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210727192049/CP_ad_icon.png"
width="110">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203145720/DSA-SP_1-min.png"
width="110">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210609101834/GC-LIve-Icon-1.png"
width="110">
<figcaption>
GeeksforGeeks | A computer science portal for geeks
</figcaption>
</figure>
</body>
</html>
Output:
Similar Reads
Explain use of Meta tags in HTML Meta Tag(<meta>) is a HTML component that gives the metadata about a HTML document. MetaData can be characterized as data that gives the data of different information or basic information about information. It is an empty tag, for example, it just has an initial tag and no end tag. They are al
4 min read
What is the use of <canvas> Tag in HTML ? HTML <canvas> Tag allows you to create graphics, animations, and interactive content directly on a web page using JavaScript. It provides a drawing surface where you can use various JavaScript functions to create dynamic and visually appealing content. Here are key aspects of the <canvas
1 min read
HTML5 figure Tag The <figure> tag is used to insert self-contained content such as illustrations, diagrams, photos, or code listings in a document. It can be placed at any position in the document and is related to the main flow. The content inside the <figure> tag goes with the flow of the document, so
3 min read
What is the use of <legend> tag in HTML ? In this article, we will discuss <legend> tag in HTML. The legend tag is used to define the title for the child's contents. The legend elements are the parent element. This tag is used to define the caption for the <fieldset> element. Syntax: <legend> Some Text...... </legend
1 min read
What are Self Closing Tags in HTML? Self-closing tags, also known as void elements, are HTML elements that do not require a separate closing tag. These tags are self-contained and are typically used for elements that do not have any content between an opening and closing tag. Self-closing tags help keep the HTML structure clean and co
3 min read