HTML5 Tutorial: figure, figcaption

, , …,
Buy Xah JavaScript Tutorial.

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:

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

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.

Reference

Back to HTML5 Tags Complete List.

blog comments powered by Disqus