HTML and CSS Reference
In-Depth Information
<aside>
In Chapter 1 you saw
<aside>
used to mark up sidebars. It rep-
resents “a section of a page that consists of content that is tan-
gentially related to the content around the
aside
element, and
which could be considered separate from that content. Such
sections are often represented as sidebars in printed typogra-
phy. The element can be used for typographical effects like pull
quotes or sidebars, for advertising, for groups of
nav
elements,
and for other content that is considered separate from the main
content of the page.”
Using an
<aside>
inside an
<article>
, for example, is the right
place for tangentially related information or pull quotes about
that article, but not, we hasten to add, page-wide navigation.
<aside>
has an implied ARIA role of “note”, but can be given
role=”complementary”
or (if it surrounds a search form)
role=”search”
.
<details>
I'm very fond of the
<details>
element, even though it has no
implementations yet. However, Remy has a clever script that
fakes it at
http://gist.github.com/370590
.
It's cool because it introduces native support for a common
behaviour, removing the need for custom JavaScript (or, some-
thing I've seen on far too many sites to be funny, pulling in the
full jQuery library).
<details>
provides an expanding/collapsing
area. It takes the following form
<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 descendent
<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 to show that the text is
“expandable” such as a down arrow.
