Figcaption Tag In Html

This post will discuss Tag Figcaption Html with relevant examples and references. This post contains much information that you can use as a learning tool.

The HTML <figcaption> tag is used to provide a caption or title for a <figure> element, which is used to represent content, such as images, illustrations, diagrams, code snippets, etc. The <figcaption> tag should be placed immediately after the opening <figure> tag and before the content it represents.

In a document, utilize the <figure> element for marking up a picture and the <figcaption> element to designate a caption:

Example:

<!DOCTYPE html> <html> <body> <figure> <img src="https://mrexamples.com/wp-content/uploads/2023/03/samuel-ferrara-1527pjeb6jg-unsplash.jpg" alt="theoxbow" style="width:100%"> <figcaption>Fig.1 The Oxbow, Thomas Cole.</figcaption> </figure> </body> </html>

To style <figure> and <figcaption> apply CSS:

Example:

<!DOCTYPE html> <html> <head> <style> figure { border: 2px #000 dotted; padding: 5px; margin: auto; } figcaption { background-color: aqua; color: grey; font-style:bold; padding: 2px; text-align: center; } </style> </head> <body> <figure> <img src="https://mrexamples.com/wp-content/uploads/2023/03/samuel-ferrara-1527pjeb6jg-unsplash.jpg" alt="theoxbow" style="width:100%"> <figcaption>Fig.1 The Oxbow, Thomas Cole.</figcaption> </figure> </body> </html>

Another example is using in a code block, where you can explain the purpose of the code snippet:

Example:

<!DOCTYPE html> <html> <body> <figure> <figcaption>A simple function to calculate the area of a circle</figcaption> <pre><code> function calculateArea(radius) { return Math.PI * Math.pow(radius, 2); } </code></pre> </figure> </body> </html>

Table Of Content-

Figcaption Tag In Html:

Figcaption Html Usage

Figcaption Html tag <figcaption> provides a caption for an <figure> element.

The <figcaption> tag can be specified as either the first or the last child of the <figure> element.

Browser Compatibility

According to the table, the numbers indicate the first browser version to accommodate the element completely.

Element
<figcaption>	8.0	9.0	4.0	5.1	11.0

Attributes

Global

When we talk about Figcaption Html then, the Global Attributes in HTML are indeed accepted by the Tag figcaption <figcaption>.

Event

The Event Attributes in HTML are also accepted by the Tag figcaption <figcaption>.

Predefined CSS

Browsers usually render the <figcaption> element with the corresponding default values:

figcaption {
display: block;
}