HTML and CSS Reference
In-Depth Information
<details>
can optionally take the
open
attribute to ensure that
the element is open when the page is loaded:
<details open>
Note that the 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
users who use assistive technology, have learning disabilities,
or who (like me) simply don't “get” numbers.
<fi gure>
I've always felt a bit semantically grubby when adding a cap-
tion to a picture to explain the image 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 explic-
itly 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 quota-
tion) and its caption, which goes in the
<figcaption>
element:
<figure>
<img src=welcome.jpg
alt=””> <!-- no alt, as it's covered by the figcaption -->
<figcaption>
Bruce and Remy welcome questions
<small>Photo © Bruce's mum</small>
</figcaption>
</figure>
Styling this markup can produce some nice effects (
Figure 2.19
).
Note that
<figcaption>
can only contain “phrasing content”—
in HTML4 terms, it can't contain “block-level” elements.
FIGURE 2.19
<figure>
and
<figcaption>
elements with
some CSS3 designer bling. (Hey,
this is a caption for a figure that's
illustrating captions and figures.
Now
that's
what I call “meta”.)
