A few years ago, Dan Cederholm published a series of articles called Simplequiz in which he posed some options for marking up a specified piece of content and invited readers to choose the one they felt was the best way to mark that up. The value was in the comments in which people said why they made that choice and debated the options (which means it is THE LAW that you read the preceeding comments before adding your own). With Dan’s blessing, we’re running an occasional series of HTML5 Simplequizzes.
For the last couple of years, it’s been fashionable to have “fat footers” in websites. Take, for example, Jeffrey Zeldman’s footer:
We see an area with a svelte black background, containing a super-glammo set of six images, each of which has a caption and links to other sites that Zeldman has an interest in: conferences, books, articles, podcasts. Below those images is a copyright notice, some more conventional footer links (contact, subscribe, style switcher) and a blue stripe:
Being HTML5 ninjas, we know that we’ll wrap each image and its attendant caption within <figure> and <figcaption> elements – but what will we wrap the whole group of external links in?
Choose from the answers below please. Make sure you show your working out. Escape your HTML, please, or we’ll put a severed unicorn head in your bed.
A:
Figures as direct children of the <footer> element:
<footer>
<figure>…</figure>
…
<p><small>Copyright © 1995–2011 L. Jeffrey Zeldman.</small></p>
</footer>
B:
The figures in an <aside> element nested in the <footer>:
<footer>
<aside>
<figure>…</figure>
…
</aside>
<p><small>Copyright © 1995–2011 L. Jeffrey Zeldman.</small></p>
</footer>
C:
The images in a <nav> element inside the <footer>:
<footer>
<nav>
<figure>…</figure>
…
</nav>
<p><small>Copyright © 1995–2011 L. Jeffrey Zeldman.</small></p>
</footer>
D:
Images in a <div> element immediately before the <footer>:
<div>
<figure>…</figure>
…
</div>
<footer>
<p><small>Copyright © 1995–2011 L. Jeffrey Zeldman.</small></p>
</footer>
E:
Images in an <aside> element immediately before the <footer>:
<aside>
<figure>…</figure>
…
</aside>
<footer>
<p><small>Copyright © 1995–2011 L. Jeffrey Zeldman.</small></p>
</footer>
Your answers below, please, with your rationale, by Friday 12th March.
HTML5 Simplequiz 6: Zeldman’s fat footer originally appeared on HTML5 Doctor on March 4, 2011.