Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

<figure>
    <img src="....">
    <figcaption>.......</figcaption>
</figure>

Parameters:



  1. img src: This tag is used in the document to include an image source.
  2. 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=
           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=
              width="110">
         <img src=
              width="110">
         <img src=
             width="110">
         <figcaption>
           GeeksforGeeks | A computer science portal for geeks
         </figcaption>
      </figure>
   </body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!