html tutorial - Figure <figure> tag in HTML - html5 - html code - html form



  • The <figure> tag is used to specifies self-contained content, like diagrams, photos, code listings, illustrations, etc.
  • The <figure> element content is related to the main flow.
  • The <figure> element position is independent of the main flow.
  • If removed the <figure>element is should not affect the document flow.
  • <figure> tag supports Global Attributes and Event Attributes.

Syntax for Figure:

<figure>Content</figure>

Differences between HTML 4.01 and HTML5

HTML 4.01

  • The HTML 4 is does not supports <figure> tag.

HTML5

  • The HTML 5 is supports <figure>tag.

Sample Coding for <figure> tag:

Tryit<!DOCTYPE html>
<html >
    <head>
        <title>Wikitechy figure tag</title>
    </head>
    <body>
        <h2>HTML figure tag with example</h2>
        <figure>
            <img src="http://www.wikitechy.com/images/logo.png"
                 alt="Wikitechy logo" width="300" height="200">
        </figure>
    </body>
</html>

Code Explanation for <figure> tag:

code explanation for figure tag

  1. The <figure>tag is used to give the image and alternative text for an image with a specific size.

Output of <figure> tag:

output for figure tag

  1. The output shows the wikitechy logo by using <figure>tag.

Browser Support for <figure> tag in HTML:

6.0 9.0 4.0 5.0 11.1
  • The <figure>element is adding a caption by using <figcaption> element.

Related Searches to figure tag in html