Wednesday 26 September 2012

HTML5: The figure & figcaption elements

HTML5: The figure & figcaption elements

Definition and Usage

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

The <figure> tag also supports the Global & Event Attributes in HTML5.

The <figure> element

W3C Says :

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.


The <figure> element is intended to be used in conjunction with the <figcaption> element to mark up diagrams, illustrations, photos, and code examples (among other things). The spec says this about <figure>:
 

The <figcaption> element

 W3C Says :

The figcaption element represents a caption or legend for a figure.

The <figcaption> element is optional and can appear before or after the content within the <figure>. Only one <figcaption> element may be nested within a <figure>, although the <figure> element itself may contain multiple other child elements (e.g., <img> or <code>). 


Using <figure> and <figcaption>

Want to know how to use ?? Code Examples?

<figure>
  <img src="/image-name.jpg" alt="Figue Example display">
</figure>
 
Figure with caption Like :
 
<figure>
  <img src="/macaque.jpg" alt="Macaque in the trees">
  <figcaption>Lorem Ipsum starts form here. Dummy text. <a href="http://www.google.coml">Google</a></figcaption>
</figure> 
 
 
Multiple Images with Caption :
 
<figure>
  <img src="/image1.jpg" alt="Kooaburra">
  <img src="/iamge2.jpg" alt="Pelican stood on the beach">
  <img src="/image3.jpg" alt="Cheeky looking Rainbow Lorikeet">
  <figcaption>Signle Caption for multiple Images <a href="http://www.google.com">Fig Caption</a></figcaption>
</figure> 

Differences between <figure> and <aside>
 
If the content is simply related and not essential, use <aside>.
If the content is essential but its position in the flow of content isn’t important, use <figure>. 
 
Text Source:
W3schols, W3C,  


 
 
 

No comments:

Post a Comment