PHPZAG.COM

HTML5 – The figure & figcaption elements

May 26th, 2012 by Laeeq | 2 comments

HTML5 introduces many interesting elements like audio, video, Canvas, Drag and Drop, SVG, figure, figcaption etc. Here in this article we we’ll discuss figure and figcaption elements. Actually the <figure> element is used in conjunction with <figcaption> element to mark up photos, diagrams etc.

The <figure> element:

As above mentioned, The <figure> element is used with the element to mark up photos, diagrams etc.

An image within a <figure> element without a caption:

Example code:

view plain copy to clipboard print ?

<figure id=“figure”>
<img src=“img/blue-footed-boobie-bird.jpg” alt=“blue footed boobie bird”>
</figure>

The <figcaption> element:

The <figcaption> element is used with <figure> element. it is used to add captions, explanations within image. it can be apear before or after the content within the <figure> . We can add only one element within a element, although the <figure> element itself may contain multiple other child elements.

Figure with an image and caption:

Example code:

view plain copy to clipboard print ?

<figure id=“figure”>
<img src=“flying_solo_bird_photography.jpg” alt=“flying solo bird photography” title=“flying_solo_bird_photography” />
<figcaption>This is flying solo bird photography</figcaption>
</figure>

<figure id=”figure”> <img src=”flying_solo_bird_photography.jpg” alt=”flying solo bird photography” title=”flying_solo_bird_photography” /> <figcaption>This is flying solo bird photography</figcaption> </figure>

A figure with multiple images

Here we we’ll nest multiple images within one <figure> element with a single caption:

beautiful birds normal — This is a nest multiple images caption

Puffin — This is a nest multiple images caption

The example code:

view plain copy to clipboard print ?

<figure id=“figure”>
<img src=“beautiful_birds-normal.jpg” alt=“beautiful birds normal” />
<img src=“Puffin.jpg” alt=“Puffin” />
<img src=“wings_birds_photo.jpg” alt=“wings birds” />
<figcaption>This is a nest multiple images caption</figcaption>
</figure>

<figure id=”figure”> <img src=”beautiful_birds-normal.jpg” alt=”beautiful birds normal” /> <img src=”Puffin.jpg” alt=”Puffin” /> <img src=”wings_birds_photo.jpg” alt=”wings birds” /> <figcaption>This is a nest multiple images caption</figcaption> </figure>

Follow @phpzag

You can subscribe to PHPZAG.COM posts by Email

HTML5 – The figure & figcaption elements

The <figure> element:

The <figcaption> element:

A figure with multiple images

Web Development Topic