"figure" and "figcaption" Elements

HTML Tutorials - Herong's Tutorial Examples

∟"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>