If you find this helpful, please click the Google 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.) |
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
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.
- Include a figcaption element inside a figure element where flow content is expected.
- 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. - Inside the figcaption element, between the
<figcaption>
starting tag and the</figcaption>
ending tag, code the inner HTML flow content for the figure caption. - 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 <figure> with <figcaption></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.