What is the <figure> element in HTML?
The <figure> element is an HTML5 element used to mark up multimedia content such as images, videos, diagrams, etc.
It is typically used in conjunction with the <figcaption> element, which is used to add a caption/description of the content within the <figure> element.
Syntax for the <figure> element
The syntax for the <figure> element is as follows:
<figure>
<!-- content to be marked up -->
<figcaption>Caption of the content</figcaption>
</figure>
The content to be marked up can be any multimedia content, such as images, videos, and illustrations.
The <figcaption> element can be placed as the first or last child of the <figure> element.
Examples of using the <figure> element
Here are some examples of using the <figure> element:
Image with caption
<figure>
<img src="car.jpg" alt="A beautiful car">
<figcaption>A beautiful car</figcaption>
</figure>
In this example, an image of a beautiful car is marked up using the <figure> element. The <img> element is used to display the image, and the <figcaption> element provides a caption for the image.
Video with caption
<figure>
<video src="video.mp4" controls></video>
<figcaption>A video of kids playing</figcaption>
</figure>
In this example, a video of kids playing is marked up using the <figure> element. The <video> element is used to display the video, and the controls attribute is added to allow the user to control the playback of the video. The <figcaption> element provides a caption for the video.
