Over the weekend two new HTML5 elements —
figcaption — were added to the draft specification. The introduction of
figcaption marks the acceptance that new elements are needed to act as captions or legends for the
The addition of the
figcaption element finally begins to clear up the difficulty in marking-up
figure element captions and looks to cement the place of the
figure element in the HTML5 specification. The
summary element does much the same for the
details element but the very nature of the
details element itself means that its future is not yet clear.
This new element acts as the optional caption or legend for any content contained within its parent
If there is no
figcaption element within a
figure element then there is no caption for the rest of its content. If there is a
figcaption element then it must be the first or last child of the
figure element and only the first
figcaption element (should there be more than one child
figcaption of the parent
figure element) represents a caption.
figure element is used to mark up any self-contained content that may be referenced from the main flow of a document but could also be removed from the primary content (for example, to an appendix) without affecting its flow. This makes it suitable for various types of content ranging from graphs and data tables to photographs and code blocks.
<p><a href="#fig-ftse">Figure 1</a> shows the extent of the collapse in the markets and how recovery has been slow.</p> <figure id="fig-ftse"> <figcaption>Figure 1. The value of the FTSE 100 Index from 1999–2009.</figcaption> <img src="ftse-100-index-graph.jpg" alt="The index hit a record high at the end of 1999 and experienced two significant drops in the following last decade."> </figure> <p>This latest financial crisis hasn't stopped Alex from writing music and his latest track is actually worth listening to.</p> <figure> <audio src="what-am-i-doing.mp3" controls></audio> <figcaption><cite>What am I doing?</cite> by Alex Brown</figcaption> </figure>
The creation of the
figcaption element is an important step forward for the HTML5 draft specification as it finally provides a reliable means to markup the caption for content that is best marked up as a
figure. Previous attempts to use the
legend element, the
caption element, and the
dd elements had failed due to a lack of backwards compatibility when it came to styling these elements with CSS.
This new element represents a summary, caption, or legend for any content contained within its parent
summary element must be the first child of a
details element and if there is no
summary element present then the user agent should provide its own. The reason for this is because the
details element has a specific function — to markup additional information and allow the user to toggle the visibility of the additional information. Although it is not specified in the specification, it is expected that the
summary element will act as the control that toggles the open-closed status of the contents of the parent
<details> <summary>Technical details.</summary> <dl> <dt>Bit rate:</dt> <dd>190KB/s</dd> <dt>Filename:</dt> <dd>drum-and-bass-mix.mp3</dd> <dt>Duration:</dt> <dd>01:02:34</dd> <dt>File size:</dt> <dd>78.9MB</dd> </dl> </details>
The introduction of the
summary element seems to secure the future of the
details element and the new behaviour that it affords, for now. When user agents begin to add support for the
The future of the
details element writes some quite significant behaviour into an HTML document and I can see it being abused to provide generic expand-collapse functionality throughout a document. It is also not entirely clear what purpose the
The future survival of the
details element, and the behaviour associated with it, may well depend on browser implementations and author applications over the coming months.