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
HTML tags can contain one or more attributes. Attributes are added to a tag to
provide the browser with more information about how the tag should appear or
behave. Attributes consist of a name and a value separated by an equals (=)
sign, with the value surrounded by double quotes. There are 3 kinds of
attributes that you can add to your HTML tags: Element-specific, global, and
event handler content attributes.
Element-Specific Attributes
The following table shows the attributes that are specific to this tag/element.
|
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
Event handler content attributes enable you to invoke a script from within your
HTML. The script is invoked when a certain "event" occurs. Each event handler
content attribute deals with a different event. Here are the standard HTML 5
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 |
For example
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]()
Figure1