HTML Figure Grouping Element

Grouping Content – Part 3

Foreword: In this part of the series I talk about HTML Figure and HTML figcaption Element.

By: Chrysanthus Date Published: 24 Jun 2015

Introduction

This is part 3 of my series, Grouping Content. In this part of the series I talk about HTML Figure and HTML figcaption Element. You should have read about the previous parts of the series before reaching here; this is a continuation.

The figure Element
This element is used to house annotate illustrations, diagrams, images, code listings, etc. So, if you have an image or video, you have to place it in a figure element, no more on its own as was done with HTML4. The philosophy of HTML5 is that any entity you can think of, should have its own element. And any group of related entities should have its own grouping element. The image element and its caption element for example, will go into a figure element.

The image is an inline element (it does not have an inherent line break element above and below it). In the case of images, if the image is small, such that it should and is meant for a line of text, you would not have to put that in a figure element; you would fit it into the line, like a text-level semantic element.

The figure element is a double tag element. figure elements can be nested.

The figcaption Element
You might have come across a page of a textbook having an image. Just below the image you saw something like,

Fig 5.6 Site Plan

This “Fig 5.6 Site Plan” is the caption of the image. A figcaption element represents a caption or legend for the figure element’s content. The figcaption element goes inside the figure element. The figcaption element is a double tag element.

The figcaption element can have a cite element.

Both the figure and figcaption elements are block level elements (each having an inherent line break element above and below it).

Image Example
The following is an image example:

<figure>
<img src="john-work.jpeg" alt="John, in his office at work.">
<figcaption>Bubbles at work</figcaption>
</figure>

The image and figcaption tags are in the figure element. The figcaption element can be typed above or below the main content (image).

Video Example
The following is a video example:

<figure>
<video src="vd.mov">
</video>
<figcaption>Exhibit D. The <cite>Rough Copy</cite> truck.</figcaption>
</figure>

Poem Example
The following is a poem example:

<figure>
'Twas brellig, and the slethy taves 
Did gyre and gumble in the wobe; 
All mimsy were the birigives, 
And the mane raths outgrube.
<figcaption><cite>Jabajaba</cite> (second verse). John Smith, 1842-97</figcaption>
</figure>

This is a verse of a poem in a paragraph element. Lines are forced within the paragraph using line break elements. The paragraph and the figcaption elements are in the figure element.

Code Listing Example
The following is a code listing example:

<figure id="l5">
<figcaption>Listing 5. The primary core interface API declaration.</figcaption>
<pre><code>interface PrimCore {
boolean verifyDaLine();
void sendDa (in sequence<byte> data);
void initSelfDestr ();
}</code></pre>
</figure>

Note that the code has been placed inside the code element. The code element has been placed inside the pre element to maintain formatting. The pre element has been placed inside the figure element. The figcaption element has been placed above the pre element, but in the figure element.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

HTML Figure Grouping Element

Grouping Content – Part 3

Introduction

Related Links

Comments