Table of contents

HTML <figcaption> Tag: Definition, Syntax, and Examples

What is HTML <figcaption> Tag?

The HTML figcaption tag is used to add a caption or description to an image, illustration, chart, or diagram on a webpage. It is paired with the figure tag, and the caption describes the content inside the figure. This helps users and search engines understand what the image represents.

The figcaption tag improves accessibility, SEO, and the overall meaning of visual content. It can be placed before or after the visual element inside the figure tag but must remain within the figure container.

Syntax of the HTML <figcaption> Tag

plaintext
<figure>
  <img src="image.jpg" alt="Description">
  <figcaption>This is the caption of the image.</figcaption>
</figure>

The image is wrapped inside the figure tag, and the figcaption tag provides a text label or caption for the image.

Examples of HTML <figcaption> Tag

Example 1: Basic HTML Figcaption Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<figure>
  <img src="nature.jpg" alt="Green Trees and Mountains">
  <figcaption>Beautiful Nature View</figcaption>
</figure>

</body>
</html>

In this example, the caption “Beautiful Nature View” gives context to the image, helping users understand the visual content better.

Example 2: SEO-Optimized Figcaption Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<figure>
<img src="web-development.jpg" alt="Professional Web Development Services - Scholar247">
<figcaption>Web Development Services Provided by Scholar247</figcaption>
</figure>

</body>
</html>

This example uses SEO-friendly alt text and caption. It includes keywords such as “Web Development Services” and “Scholar247” to improve search engine visibility and content relevance.

Attributes of the HTML <figcaption> Tag

The figcaption tag:

• Does not support any special attributes
• Only contains text or inline elements
• Must be used inside the figure tag

There are no unique attributes provided for styling or interaction. Any styling must be done using CSS.

Best Practices for HTML <figcaption> Tag

• Always include meaningful and descriptive text in the caption.
• Use relevant keywords naturally for better SEO.
• Ensure captions match the context of the image.
• Keep captions short but informative.
• Use CSS for styling instead of inline attributes.

FAQs About HTML <figcaption> Tag

Q1: What is the purpose of the figcaption tag?

The figcaption tag provides a caption or description for images or figures, helping users understand the visual content.

Q2: Can figcaption be used outside the figure tag?

No. The figcaption tag must always be inside the figure tag to correctly associate with the image.

Q3: Does figcaption help with SEO?

Yes. Figcaption improves semantic meaning and accessibility, which can help search engines understand image relevance.

Q4: Where should figcaption be placed inside the figure?

It can be placed either before or after the image, as long as it remains inside the figure tag.

Q5: Can I style figcaption with CSS?

Yes. You can apply CSS to change the font, alignment, padding, or other styles to improve appearance.

HTML

Related Articles