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.
<img src="img/great-wall.jpg" alt="The great wall of China" width="500">
<figcaption>Figure 1- The great wall of China</figcaption>
It can be observed that the content is placed between the opening “<figure>” and closing “</figure>” tags.
Style figure Element
border: 5px solid #b69898;
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
background-color: rgb(25, 11, 104);
font: italic smaller sans-serif;
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.
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.