Introduction
The figure tag was introduced in HTML 5. The
<figcaption> tag is supported in all major browsers. This tag provides a
container for content that is equivalent to a figure or diagram in a book. You can use the figure element to associate a caption together with some embedded content, such as a graphic or video. You can use the figure element in conjunction with the figcaption element to provide a caption for the contents of your figure element.
Syntax
<figure><figcaption>... flow content
...</figcaption>... flow content ...</figure>
Attributes
Element-Specific Attributes
Attributes Introduced by
HTML5
| Attributes | Description |
| None |
Global Attributes
The following attributes are standard across all HTML 5
tags.
|
HTML5
Global Attributes
|
||
| accesskey | draggable | style |
| class | hidden | tabindex |
| dir | spellcheck | |
| contenteditable | id | title |
| contextmenu | lang | |
Event Handler Content Attributes
| onabort | onerror* | onmousewheel |
| onblur* | onfocus* | onpause |
| oncanplay | onformchange | onplay |
| oncanplaythrough | onforminput | onplaying |
| onchange | oninput | onprogress |
| onclick | oninvalid | onratechange |
| oncontextmenu | onkeydown | onreadystatechange |
| ondblclick | onkeypress | onscroll |
| ondrag | onkeyup | onseeked |
| ondragend | onload* | onseeking |
| ondragenter | onloadeddata | onselect |
| ondragleave | onloadedmetadata | onshow |
| ondragover | onloadstart | onstalled |
| ondragstart | onmousedown | onsubmit |
| ondrop | onmousemove | onsuspend |
| ondurationchange | onmouseout | ontimeupdate |
| onemptied | onmouseover | onvolumechange |
| onended | onmouseup | onwaiting |
This example defines the figure tag with figcaption tag.
- <!DOCTYPE HTML>
- <html>
- <body >
- <div >
- <figure>
- <img src="Sunset.jpg"
- alt="figure pointing to figcaption below"
- </figure style="width: 195px">
- </div>
- <figure>
- <figcaption>Example of HTML <figure> with <figcaption></figcaption>
- </figure>
- </p>
- </body>
- </html>
Internet Explorer
![figure1].gif](https://cdn.c-sharpcorner.com/uploadfile/667ddf/figure-tag-in-html5/images/figure1-.webp)
Figure1
Join the conversation! Your thoughts help the community grow.