By Aaron Gustafson CHAPTER 7is not required to access the core experience, but on the other, the bits of
JavaScript-related markup are not injected into the content in a distracting
or confusing way.
The thumbnails are a pretty simple example of this, but let me give you
another one: a tabbed interface. It’s a pretty common gadget consisting of
a series of content panels that are displayed one at a time when the corre-
sponding tab is activated.
When looking at this from a
semantic point of view, the panels of
content could be ensconced in separate
section elements with the tabs as list
items within an ordered list. Pretty
simple and straightforward, right?
What if there is no JavaScript to
make it function as a tabbed inter-
face? In that case, it really shouldn’t
look like a tabbed interface, as that
would render the bulk of the content
visually inaccessible, which isn’t very
considerate.
Without JavaScript, the list of links and the sections aren’t really all
that necessary either; they don’t add much to the page in terms of meaning
and are just extra markup to download. It would be nice to save those bits
for places where they are actually useful, for microformats and the like.
Stripped of all cruft, what we have in this example is a recipe that con-
sists of several titled sections.
If you’re like me and get all nerdy about semantics, you’ve probably
already realized that those titles should be headings (let’s say h2s) and
heading levels create a natural document outline^14.
14 http://html5doctor.com/outlines/
The same recipe, linearized.