Over the weekend two new HTML5 elements – summary
and figcaption
– were added to the draft specification. The introduction of summary
and figcaption
marks the acceptance that new elements are needed to act as captions or legends for the details
and figure
elements. 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 figure
element.
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.
The 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 dt
and 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 details
element.
The 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
element.
<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 details
element you won’t need JavaScript, or even CSS, to have expanding or collapsing sections in an HTML document.
There will continue to be some debate over the inclusion of behaviour in an HTML specification especially given the widespread use of JavaScript to provide the expand-collapse functionality that details
describes.
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 details
element actually serves other than being an attempt to bypass the need for JavaScript or CSS to expand or collapse sections of a document.
There has been a general softening of the rough distinction between content, presentation, and behaviour. JavaScript libraries are being used to patch holes in browser CSS and HTML5 support, the CSS3 modules introduce plenty of behaviour that was previously only possibly with JavaScript, and the HTML5 specification is also introducing functionality and behaviour that previously required the use of JavaScript.
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.