Learn HTML – Part 60 – figcaption Tag – Figure Caption

Learn HTML – Part 60 – figcaption Tag – Figure Caption

The HTML figcaption tag is used to define a caption for content inside a figure element.

It provides a description or title for images, diagrams, or other media.


What is the figcaption Tag?

The figcaption element represents a caption or legend for a figure.

It helps users understand the context of the media content.


Basic Syntax

<figure>

   <img src="image.jpg" alt="Image">

   <figcaption>Caption text</figcaption>

</figure>

Example – Image with Caption

<figure>

   <img src="https://via.placeholder.com/300" alt="Sample Image">

   <figcaption>This is an example caption</figcaption>

</figure>

Output:

Sample Image
This is an example caption

Position of figcaption

The figcaption can be placed before or after the media content.

<figure>

   <figcaption>Caption at top</figcaption>

   <img src="image.jpg" alt="Image">

</figure>

Why Use figcaption?

  • Adds meaningful captions to media
  • Improves accessibility
  • Enhances semantic HTML structure
  • Provides context to users

The figcaption tag provides captions for media content inside a figure.


Common Mistakes Beginners Make

  • Using figcaption outside figure
  • Not providing descriptive captions
  • Using figcaption without meaningful content

Conclusion

The HTML figcaption tag is used to add captions to media content inside a figure element.

It improves both usability and accessibility of web content.

What’s Next?

Now that you have learned most essential HTML elements, the next step is to explore the mark tag, which is used to highlight important text.

Next: Learn HTML – Part 61 – mark Tag – Highlight Text →


Series: Learn HTML Series

Facebook
WhatsApp
Twitter
LinkedIn
Pinterest

Leave a Comment

Your email address will not be published. Required fields are marked *

Related Articles from the Series

learn-html-part-63-complete-html-project-thumbnail
Learn HTML – Part 63 – Complete HTML Project (Build a Web Page)
Learn HTML – Part 63 – Complete HTML Project In this final lesson, we will build a complete HTML webpage...
learn-html-part-62-time-tag-date-time-thumbnail
Learn HTML – Part 62 – time Tag – Date & Time
Learn HTML – Part 62 – time Tag – Date & Time The HTML time tag is used to represent dates and times...
learn-html-part-61-mark-tag-highlight-text-thumbnail
Learn HTML – Part 61 – mark Tag – Highlight Text
Learn HTML – Part 61 – mark Tag – Highlight Text The HTML mark tag is used to highlight text that is...
learn-html-part-59-figure-tag-media-content-thumbnail
Learn HTML – Part 59 – figure Tag – Media Content
Learn HTML – Part 59 – figure Tag – Media Content The HTML figure tag is used to group media content...
learn-html-part-58-track-tag-video-subtitles-thumbnail
Learn HTML – Part 58 – track Tag – Video Subtitles
Learn HTML – Part 58 – track Tag – Video Subtitles The HTML track tag is used to add subtitles, captions,...
learn-html-part-57-source-tag-media-sources-thumbnail
Learn HTML – Part 57 – source Tag – Media Sources
Learn HTML – Part 57 – source Tag – Media Sources The HTML source tag is used to define multiple media...
learn-html-part-56-picture-tag-responsive-images-thumbnail
Learn HTML – Part 56 – picture Tag – Responsive Images
Learn HTML – Part 56 – picture Tag – Responsive Images The HTML picture tag is used to display responsive...
learn-html-part-55-dialog-tag-modal-dialog-thumbnail
Learn HTML – Part 55 – dialog Tag – Modal Dialog
Learn HTML – Part 55 – dialog Tag – Modal Dialog The HTML dialog tag is used to create modal or popup...
learn-html-part-54-summary-tag-details-caption-thumbnail
Learn HTML – Part 54 – summary Tag – Details Caption
Learn HTML – Part 54 – summary Tag – Details Caption The HTML summary tag is used to define a visible...
learn-html-part-53-details-tag-expandable-content-thumbnail
Learn HTML – Part 53 – details Tag – Expandable Content
Learn HTML – Part 53 – details Tag – Expandable Content The HTML details tag is used to create expandable...
Scroll to Top