<figure> <img src="http://www.PuStudy.Com/images/examples/flying_bat.gif" alt="Drawing of a bat."> <figcaption>Figure 1. Bats are red and purple, but they have yellow eyes.</figcaption> </figure>
The above example demonstrates usage of the
<figure> element is used for providing self contained content which is typically referenced as a single unit away from the main flow of the content.
Examples of usage could include annotating illustrations, diagrams, photos, code listings, etc
You can (optionally) use the
<figcaption> element to provide a caption for the figure.
When referring to items marked up in a
<figure> element, avoid using relative references like "in the above diagram" or "the photo on the left" etc. Doing this could cause problems if the page layout changes (this could happen when being viewed on different sized devices, or if stylesheets are changed). It is better to use a label (such as "in Figure 1" etc) provided in the
<figcaption> element. This way, the diagram can stand on its own regardless of its flow in the content. If it is moved, it will still makes sense.