"figure" and "figcaption" Elements

This section provides an tutorial example of using 'figure' and 'figcaption' elements in HTML documents to present contents as reference blocks.

"figure" elements are added in HTML5 standard to allow us to create self-contained blocks, optionally with captions, which can be referenced from other parts of same documents.

"figcaption" elements are added in HTML5 standard to allow us to represent caption information inside "figure" elements.

Here are some general rules about "figure" and "figcaption" elements:

1. "figure" elements are used to present reference blocks.

2. "figcaption" elements are optional elements that should have only text content and appear as the first or the last element of "figure" elements.

3. Multiple "figure" elements are allowed at the same level.

4. "figure" elements are allowed to be directly nested.

Here is a good example of using "figure" and "figcaption" elements in HTML documents:

<!DOCTYPE html>
<!-- HTML5_figure_and_figcaption_Example.html
 - Copyright (c) 2014, HerongYang.com, All Rights Reserved.
-->
<html>
<head>
<title>HTML5 figure and figcaption Example</title>
</head>
<body>

<p>CSS (Cascading Style Sheets) is a style sheet language used for 
describing the presentation semantics (the look and formatting) of 
a document written in HTML or other markup languages. 
See the <a href="#CSS_Example">Listing 1 - CSS code example</a> listed
at the end of the page.
</p>

<p>Because not all browsers correctly parse CSS code, developed coding
techniques known as CSS hacks can either filter specific browsers or 
target specific browsers (generally both are known as CSS filters). 
The former can be defined as CSS filtering hacks and the latter can be
defined as CSS targeting hacks. Both can be used to hide or show parts
of the CSS to different browsers. This is achieved either by 
exploiting CSS-handling quirks or bugs in the browser, or by taking 
advantage of lack of support for parts of the CSS specifications. 
</p>

<figure id="CSS_Example">
<pre style="border-style:solid"><code>interface PrimaryCore {
 boolean verifyDataLine();
 void sendData(in sequence&lt;byte> data);
 void initSelfDestruct();
}</code></pre>
 <figcaption>Listing 1 - CSS Code Example</figcaption>
</figure>

</body>
</html>

When the above HTML document is viewed in a Web browser, you will see something like this:
HTML5 figure and figcaption Example

Last update: 2014.

Table of Contents

 About This Book

 Introduction of HTML

Introduction of HTML5 Features

 What Is HTML5?

 Differences between HTML5 and HTML 4

 HTML5 DOCTYPE Declaration

 Adding Inline SVG Image in HTML5 Documents

 Adding MathML Formula in HTML5 Documents

 "article" and "section" Elements

 "header" and "footer" Elements

 "nav" and "aside" Elements

 "details" and "summary" Elements

"figure" and "figcaption" Elements

 "audio" and "video" Elements

 HTML Document Structure and Content

 HTML Document and Elements Syntax

 References

 PDF Printing Version