Problem Statement
What is the purpose of the <figure> and <figcaption> tags?
Explanation
The figure and figcaption tags are semantic HTML5 elements used to group an image or illustration with its caption. The figure tag acts as a container for the image and caption together. The figcaption tag provides the caption text that describes or explains the image. This semantic grouping makes the relationship between the image and its caption explicit to browsers, search engines, and assistive technologies. The figure element can contain not just images, but also illustrations, diagrams, code snippets, or videos. The figcaption can appear before or after the content inside the figure. Using figure and figcaption improves accessibility because screen readers understand that the caption belongs to the image. It also helps with search engine optimization by providing context for the image. This is better than just using a div or paragraph for captions because figure and figcaption have semantic meaning.
Code Solution
SolutionRead Only
<!-- Basic figure with caption --> <figure> <img src="sunset.jpg" alt="Sunset over mountains"> <figcaption>A beautiful sunset captured in the Himalayas</figcaption> </figure> <!-- Caption before image --> <figure> <figcaption>Company Logo Evolution</figcaption> <img src="logo-history.png" alt="Logo designs from 2010 to 2024"> </figure> <!-- Multiple images in one figure --> <figure> <img src="before.jpg" alt="Before renovation"> <img src="after.jpg" alt="After renovation"> <figcaption>Kitchen renovation before and after</figcaption> </figure>
