HTML5: The figure & figcaption elements
The <figure> tag also supports the Global & Event Attributes in HTML5.
The
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
The figcaption element represents a caption or legend for a figure.
The
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