The <figure> element

The <figure> element is used to specify the container (self-contained) where we want to place images, illustrations, drawings, specifications, etc? Because this is a self-contained block, removing it from the flow will not (should not) affect the document's flow.

Syntax:

<figure></figure>

Attributes:

global attributes
event attributes

NOTE: To add caption to a figure, use <figcaption> element.

Example

The figure tag example with an image:

<!DOCTYPE html>
<html lang='en-us'>
<head><style type='text/css'>
	body{background-color:#343434; color:#ddd;}
	figure{background-color:#f0f0f0; padding:2px 5px; margin:0.5em auto;}
	figcaption{background:#e2e2e2; color:#223344;}
</style></head>
<body>
<figure> 
<figcaption>BrenkoWeb LLC</figcaption> 
<img src="../../../img/tutorials/brenkoweb_300x250_rev3.gif" alt="Brenkoweb.com" width="225px"> 
</figure>
</body>
</html>

›› go to examples ››

The <figure> element

Syntax:

Attributes:

Example

The figure tag example with an image:

Comments

About

Contact

Get Connected