Figuring About Figure and Figcaption Elements



HTML Today, we'll take a look at the figure and figcaption element in HTML5. The figure element is used to hold data that is a complete unit, and is related to and referenced by the surrounding content.


This is different than the aside element where, although the data is slightly related, the data is not part of the document. The figcaption element is an optional element inside the figure element to place caption for the figure. Any data, such as images, video, a chunk of text, can be used inside the figure element.


Here is an example:


The picture below shows what a panda looks like.
<figure>
    <img src="panda.png" alt="Panda Picture"/>
</figure>


In some cases, it is good practice to have labels for the figure. For example, If an image gets moved to another location, such as from below the text to the top of the page, the editor would need to change any text description that referenced the location of the image. In a long document, this could be troublesome. The element figcaption can be used to label the image for easy reference.


Picture A shows what a panda looks like.
<figure>
    <img src="panda.png" alt="Panda Picture"/>
    <figcaption>Picture A: Panda</figcaption>
</figure>


Figure elements can also be nested to show a set of related figures. Here is an example:


<figure>
    <figcaption>The Family Cat's Two New Kittens</figcaption>
    <figure>
      <img src="kitten1.jpg" alt="Snowball" />
      <figcaption>First Kitten: Snowball</figcaption>
    </figure>
    <figure>
      <img src="kitten2.jpg" alt="Fluffy" />
      <figcaption>Second Kitten: Fluffy</figcaption>
    </figure>
</figure>