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

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

Style figure Element

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

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

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.