html

figure Tag in HTML

HTML5 introduced an HTML <figure> element that specifies the self-contained content such as charts, tables, code blocks, and so on. It can handle groups of photos, diagrams, or more. Moreover, the <figure> element can have an optional <figcaption> to add the caption to the
This article provides a guide on the HTML <figure> element.

How to Add figure Element in HTML?

In HTML, first, add an <figure> element that contains the <img> tag with attributes src to specify the path of the image and width to specify the image’s width. Then, add <figcaption> element to add a caption to the image.

HTML

<figure>
  <img src="img/great-wall.jpg" alt="The great wall of China" width="500">
  <figcaption>Figure 1- The great wall of China</figcaption>
</figure>

It can be observed that the content is placed between the opening “<figure>” and closing “</figure>” tags.

Style figure Element

figure {
  border: 5px solid #b69898;
  display: flex;
  margin: auto;
  flex-flow: column;
  max-width: 290px;
  padding: 2px;
}

The following CSS properties are applied to the figure element:

  • border” property is a shorthand property that sets the element’s border. It specifies values for the width of the border, style of the border, and color of the border.
  • display” with value flex makes a responsive layout for the items.
  • margin” property is utilized to place the element horizontally in the center.
  • flex-flow” property with the value column specifies the flex container’s direction and wrapping behavior.
  • max-width” specifies the value of an element’s maximum width.
  • padding” produces space around the content of the element.

Style img Element

img {
  max-height: 140px;
  max-width: 290px;
}

Here is the description of the added properties:

  • max-height” property with the value 140px sets the element’s maximum height to 140px.
  • max-width” property with the value 140px sets the element’s maximum width to 140px.

Currently, our web page looks like this:

Now, style the <figcaption> element in the below section.

Style figcaption Element

figcaption {
  background-color: rgb(25, 11, 104);
  color: ghostwhite;
  text-align: center;
  font: italic smaller sans-serif;
  padding: 6px;
}

Apply the following CSS properties to the figcaption element:

  • background-color” property is utilized to apply color to the element’s background.
  • color” specifies the font color.
  • text-align” property sets the alignment of the element according to its value.
  • font” property with the value set as italic smaller sans-serif indicates the style of font as italic, size small, and font-family as sans-serif.
  • padding” property adds space around the content of the element.

By providing the above CSS properties to the elements, we will get the result as shown below:

We have compiled the essential information related to the HTML figure tag in HTML.

Conclusion

There are different properties that we can apply to the HTML elements to make them good-looking and organized. Likewise, the <img> or <figure> tags are utilized to insert images into the HTML. More specifically, the <figure> element handles the group of contents such as code listing, diagrams, or photos. It can also contain the <figcaption> to add some caption to the content. This article demonstrated the usage of the HTML figure tag with a practical example.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.