In HTML, the Figure Caption tag is used to add the caption or title to the content which is placed inside the HTML tag. It is placed as the first or last child element of the element. It is one of the new sectioning elements in HTML 5.
Estimated reading time: 3 minutes
Syntax:
This tag contains both a starting tag and ending tag. The content is written between these two tags.
<figcaption> caption of the image content </figcaption>
Tag Characteristics:
HTML
th, td{ padding: 20px; }
| HTML tag | It is used to provide a caption to an image content. |
| Content categories | None. |
| Permitted content | Flow content. |
| Tag omission | None, both opening and closing tags are mandatory. | tag must be its first or last child |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Group, none, presentation. |
| DOM interface | HTML Element |
| Permitted parents | A element; The
Tag:
Sample of the HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3>Example of HTML <figcaption> Tag</h3>
<p>Share Point Anchor</p>
<figure>
<img src="https://sharepointanchor.com/wp-content/uploads/2021/01/SPA-LOGO.png">
<figcaption>SPA-Logo Image </figcaption>
</figure>
</body>
</html>
The HTML tag supports both Global Attributes and Event Attributes.
Tag:
Styling Methods for
You can use the following properties to style an HTML figure caption tag.
tag:
Properties to style the visual weight/emphasis/size of the text in
CSS font-style – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
CSS font-family – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
CSS font-size – This CSS property will help to set the size of the font.
CSS font-weight – This CSS property used to define whether the font should be bold or thick.
CSS text-transform – This CSS property will control the text case and capitalization.
CSS test-decoration – This CSS property specifies the decoration added to text such as text-decoration-line , text-decoration-color , text-decoration- style.
Tag:
Styles to coloring the text in
CSS color – This CSS property will specify the color of the text content and decorations.
CSS background-color – This CSS property helps to set the background color of an element.
Tag:
Text layout styles for
CSS text-indent – This CSS property is used to specify the indentation of the first line in a text block.
*CSS text-overflow * – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
CSS white-space – This CSS property describes how white-space inside an element is handled.
CSS word-break – This CSS property decides where the lines should be broken.
Tag:
Other Properties for
CSS text-shadow – This CSS property helps to add the shadow to text.
CSS text-align-last – This CSS property will set the alignment of the last line of the text.
CSS line-height – This CSS property defines the height of a line.
CSS letter-spacing – This CSS property helps to decide the spaces between letters/characters in a text.
CSS word-spacing – This CSS property specifies the spacing between every word.
Top comments (0)