HTML figure and figcaption

The HTML <figure> and <figcaption> tags are used to group an image, video, or other types of media content along with its caption or description.

The HTML <figure> element is used to mark up any media file in a document and <figcaption> element is used to define the caption for that media file. For example:

<html>
<head>
<title>HTML figure and figcaption tags</title>
</head>
<body>
<h1>figure and figcaption tags in html</h1>
<figure>
  <img src="https://crus4.com/wp-content/uploads/2023/02/nature.jpg" alt="Nature Pic" width="600px"; height="400px";>
  <figcaption>Did you wanna visit here. </figcaption>
</figure>
</body>
</html>

Copy the Code and Run it Here

In an above example, the <figure> tag is used to group an image (indicated by the <img> tag) and its caption (indicated by the <figcaption> tag) together. The image is identified by its source, which is specified using the “src” attribute, and the alternative text is specified using the “alt” attribute.

We can use CSS to style the <figure> and <figcaption> tags.

Example

<!DOCTYPE html>
<html>
<head>
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}
figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
<body>
<h1>figure and figcaption tags in html + CSS</h1>
<figure>
  <img src="https://crus4.com/wp-content/uploads/2023/02/nature.jpg" alt="Nature" width="700px" height="400px">
  <figcaption>Did you wanna visit here. </figcaption>
</figure>
</body>
</html>

Copy the Code and Run it Here

Previous

Next

Share This Post!

HTML figure and figcaption