figure and figcaption

<figure> element – includes images, diagrams or photos which are relevant to the main content of the page. The <figcaption> element is used to add a caption to the image.

Usage: these elements are used in combination to support increased accessibility and greater clarity regarding the content of associated images or diagrams. The <figcaption> element is optional and should be included either as the first child or the last child of the <figure> element.

Permitted Content: one <figcaption> element (as either the first child or last child) and appropriate flow elements (such as <img>).

Tag omission: both start and end tag must be present for both <figure> and optional <figcaption> elements.

Example code:

<figure>
<img src=”../orchid.jpg” alt=”orchid blossom” height=”150″ width=”200″ />
<figcaption>A close-up of an orchid taken at the Changi Airport in Singapore.</figcaption>
</figure>

Example page (opens in a new tab/ window – view source code): http://learning-html5.info/examples/ExampleFigure.html

Default display properties: display: block.

Common Attributes: typical global attributes only.

Permitted Parent Elements: any element which can contain phrasing or flow elements.

References: http://dev.w3.org/html5/markup/figure.html#figure and http://dev.w3.org/html5/markup/figcaption.html

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>