What are <figure> and <figcaption> tags in HTML?
Overview
The <figure> tag represents free-standing content like photos, illustrations, code, and so on in a document. This tag goes along with the main flow of the document and doesn't affect the document's flow if removed or moved to another part.
Let's use a <figure> tag to display an image.
Explanation
In the HTML tab:
- Lines 5–7: We use the
<figure>tag to help us to display the figure in web page.
The figcaption tag
The <figcaption> tag represents the caption or description of the image. This tag is optional but is usually preferred to go along with the <figure> tag because it improves the user experience. Let's see this tag in action.
Note: The
<figcaption>tag should either be the first child or the last child of the<figure>tag.
Examples
The examples below show the use case of the <figure> and <figcaption> tags to display the code and a quote.
Explanation
In the HTML tab:
- Lines 5–17: We use the
<figure>and<figcaption>tags to display the figure and the caption on the web page.