HTML5 Tutorial: figure, figcaption

, , …,

figure tag is used for including figures as in a book. It can be {illustration, image, photo, video, animation, table, code example, …}.

figcaption tag must used inside figure, as first or last item. It is for figure caption.

Here's a example of figurefigcaption:

css is awesome mug 2009
CSS is Awesome mug.

Here's the HTML code:

<img src="i/css_is_awesome_mug_2009.jpg" alt="css is awesome mug 2009" width="700" height="375" />
<figcaption>CSS is Awesome</figcaption>

Here's CSS:

figure {margin:.2rem}
figure * {margin:0}
figure > img {max-width:100%;height:auto;box-shadow:3px 3px 4px 3px silver}
figcaption {margin-left:1rem}
figcaption:before {content:"↑ "}

Warning: the figcaption tag must the first or last child of the figure tag.

Typical Default Style

figure {
display: block;
margin-before: 1em;
margin-after: 1em;
margin-start: 40px;
margin-end: 40px; }
figcaption {
display: block; }

test your browser here: html5 figure figcaption test page

Browser Support

Test if you browser support it here: HTML5 figure figcaption test page.

As of Safari (5.0.4) and Opera (11.01) doesn't support it. Google Chrome (10.0.648.151), Firefox 4.0, IE9, all support it.

As of , now Opera 11.50 also supports it.

As of , all latest versions of major browsers supports it. Safari 5.1 now supports it.


Back to HTML5 Tags Complete List.

Like what you read? Please tell friends, share link, or Buy JavaScript in Depth. Thanks.
blog comments powered by Disqus