HTML <figcaption> Tag

 

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.


If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)


PDF mobile

The <figcaption> Tag in HTML 5

The <figcaption> tag is used to put a caption above or below a figure in HTML. The figcaption element is one of the phrase elements in HTML.

Figure with caption
figure pointing to figcaption below
Example of HTML <figure> with <figcaption>

This is an actual working example of the <figcaption> tag example code below.


<figcaption> Tag Syntax

<body>
   ...
   ... flow content expected ...
   <figure>
      <figcaption>
         ... flow content ...
      </figcaption>
      ... flow content ...
   </figure>
   ...
   ... flow content expected ...
   <figure>
      ... flow content ...
      <figcaption>
         ... flow content ...
      </figcaption>
   </figure>
   ...
</body>
Rules for coding HTML figcaption elements

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

  1. Include a figcaption element inside a figure element where flow content is expected.
  2. Begin the figcaption element with a starting <figcaption> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
  3. Inside the figcaption element, between the <figcaption> starting tag and the </figcaption> ending tag, code the inner HTML flow content for the figure caption.
  4. End the figcaption element with a matching </figcaption> closing tag.
Content of the figcaption element

The content of the figcaption element can include HTML comments, text content and any tags that can be used in flow content.


<figcaption> Tag Attributes

Attributes of the <figcaption> tag
global attributes In addition to the personal attributes of the <figcaption> tag below, any of the common HTML attributes can also be coded.

<figcaption> Tag Examples

Examples of the figcaption tag in HTML 5
Figure with <figcaption>
(see <figcaption> tag demo above)
<div style="text-align: center; margin: 1em">
   <figure>
      <img src="http://www.HTML-5.com/images/html-figure-with-figcaption.png"
         alt="figure pointing to figcaption below"
         style="border: 3px outset gray;"
      /><br/>
      <figcaption>Example of HTML &lt;figure&gt; with &lt;figcaption&gt;</figcaption>
   </figure>
</div>

Changes in HTML 5 - <figcaption> Tag

What's new in HTML 5

The <figcaption> tag is one of the new elements in HTML 5.

Differences between HTML 5 and earlier versions of HTML

The <figcaption> tag did not exist in older versions of HTML.


Valid HTML 5