HTML and CSS Reference
In-Depth Information
<details>
<summary>Photograph details</summary>
<p>Photograph taken on <time datetime=2009-12-25>Xmas
¬ Day 09</time> with a Canon IXUSi.</p>
<p><small>Copyright Bruce Lawson,
¬ <address>bruce@brucelawson.co.uk</address></small>.</p>
¬ </details>
The contents of the descendant
<summary>
element are focus-
able and act as a control that, when activated by mouse or key-
board, expand or collapse the remainder of the element. If no
<summary>
element is found, the browser supplies its own default
control text, such as “details” or a localised version. Browsers
will probably add some kind of icon, such as a down arrow, to
show that the text is “expandable.”
<details>
can optionally take the
open
attribute to ensure that
the element is already open when the page is loaded:
<details open>
At time of writing,
<details>
is only supported by Google Chrome
12. Use with care though, and test it well, as it has accessibility
problems: it can't be controlled with a keyboard so requires a
mouse. Hopefully this will be fixed in a future version of Chrome.
NoTE
The
<details>
element isn't restricted to
purely textual markup—it could
be a login form, an explanatory
video, a table of source data for
a graph, or a description of the
structure of a table for those
who use assistive technology,
have learning disabilities, or who
(like me) simply don't “get”
numbers.
<igure>
I've always felt a bit semantically grubby when adding a caption
to explain a picture or to give attribution to the photographer,
because the only way to do it has been with text that runs into
surrounding content, with no way to explicitly associate it with
the image. There simply haven't been any markup constructs for
this before. Perhaps I'm just weird, but that's why I'm very glad
to see the
<figure>
element that wraps an image (or a video, or
block of code, or a supporting quotation) and its caption, which
goes in the
<figcaption>
element:
<figure>
<img src=welcome.jpg
>
<figcaption>
Bruce and Remy welcome questions
<small>Photo © Bruce's mum</small>
</figcaption>
</figure>
