Explain the use of figure tag in HTML5 Last Updated : 24 Aug, 2021 Comments Improve Suggest changes Like Article Like Report 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: Comment More infoAdvertise with us Next Article Explain the use of figure tag in HTML5 P priyavermaa1198 Follow Improve Article Tags : Web Technologies HTML HTML5 HTML-Questions 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 How to use the canvas drawImage() method in HTML5 ? The canvas drawImage() method of the Canvas 2D API is used to draw an image in various ways on a canvas element. This method has additional parameters that can be used to display the image or a part of the image. Syntax: context.drawImage(img, x, y, swidth, sheight, sx, sy, width, height); Approach: 2 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 Graphics Explanation in HTML5 In this article, we will explain the concept of graphics in HTML5. Graphics are representations used to make web-page or applications visually appealing and also for improving user experience and user interaction. Some examples of graphics are photographs, flowcharts, bar graphs, maps, engineering d 3 min read Explain the significance of <head> and <body> tag in HTML The HTML <head> and <body> tags are the two most commonly used tags in HTML. It is very rare to find an industry-level website that does not use the <head> and <body> tag in its pages. In this article, we are going to learn the significance of these two tags in an HTML docume 3 min read Top 10 Uses of HTML in the Real World HTML (Hyper Text Markup Language) - is the backbone of the web- a powerful yet simple language that forms the structure of nearly every website we use today. While it's often associated with basic web page creation, HTML's capabilities extend far beyond that. With the arrival of HTML 5, it has evolv 8 min read Top 10 New Features of HTML5 HTML stands for Hypertext Markup Language, the standard language for creating web pages and web applications. HTML5, the 5th version of HTML, introduces several new features that enhance the creation of both static and dynamic websites. Let's explore the top 10 new features of HTML5 that make it a s 5 min read Like