HTML5: How to define a caption for a figure element?

Last update on February 08 2024 12:47:27 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Opening tag for declaring the document type -->
<html><!-- Opening tag for the root element of the HTML document -->
<head><!-- Opening tag for the document's header section -->
<meta charset="utf-8"><!-- Metadata tag specifying the character encoding of the document -->
<title>How to define a caption for a figure element</title><!-- Title of the HTML document -->
</head><!-- Closing tag for the document's header section -->
<body><!-- Opening tag for the document's body section -->
<figure><!-- Opening tag for the figure element -->

<img src="https://www.w3resource.com/images/w3logo6.png" alt="w3resource Logo"      
width="149" height="52" /><!-- Image tag with attributes specifying the source, alternate text, width, and height of the image -->

<figcaption>Official Logo of w3resource.com</figcaption><!-- Opening and closing tags for the figcaption element, providing a caption for the figure -->
</figure><!-- Closing tag for the figure element -->
</body><!-- Closing tag for the document's body section -->
</html><!-- Closing tag for the root element of the HTML document -->

Explanation:

This HTML code defines a figure element, which is typically used to group related content, such as images and their captions.
Inside the figure element, there is an image (img) tag that specifies the source, alternate text, width, and height of the image.
Following the image tag, there is a figcaption element which provides a caption for the image.

Live Demo :

See the Pen figcaption-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page