Hide and Seek with HTML5

I've recently learned an important HTML5 trick and as I plan on using it more often, I am also sharing it with you.

If you are familiar with the way Blogger summaries were first implemented, that is very similar (with the exception that the old “Read More” trick was implemented with a lot of JavaScript, whereas this one is simple to write, all the work being done by the browser.

To illustrate this trick, I’ll use Patrick Cox’s top 10 reasons to use HTML5 (as usual, links below).

<details>

 <summary>HTML5 isn’t hard to use or understand and even though it’s not fully adopted yet, there are still plenty of reasons to start using it right now.</summary>

 <ul>
<li>10 – Accessibility: semantics and ARIA, a W3C spec used to assign specific “roles” to elements in an HTML document </li>
<li>9 – Video and Audio Support: no more clunky <embed> and <object> tags, just simple and beautiful <video> </li>
<li>8 – Doctype: <!DOCTYPE html> – that’s all there is to it and it works all the way back to IE6 </li>
<li>7 – Cleaner Code: cure your “divitis” and “classitis” (use nav instead of div id=”nav”) </li>
<li>6 – Smarter Storage: a persistent client-side database adopted by all the popular browsers </li>
<li>5 – Better Interactions: <canvas> is the drawing tag that almost replaces Flash </li>
<li>4 – Game Development: lotsa tutorials </li>
<li>3 – Legacy/Cross Browser Support: add a JavaScript shiv for the old, stubborn browsers </li>
<li>2 – Mobile, Mobile, Mobile: the most mobile ready tool – Viewport, etc </li>
<li>1 – It’s the Future, Get with It! Don’t fear the reaper. </li>
 </ul>
</details>

Here’s the code in use:

HTML5 isn’t hard to use or understand and even though it’s not fully adopted yet, there are still plenty of reasons to start using it right now.

10 – Accessibility: semantics and ARIA, a W3C spec used to assign specific “roles” to elements in an HTML document
9 – Video and Audio Support: no more clunky <embed> and <object> tags, just simple and beautiful <video>
8 – Doctype: <!DOCTYPE html> – that’s all there is to it and it works all the way back to IE6
7 – Cleaner Code: cure your “divitis” and “classitis” (use nav instead of div id=”nav”)
6 – Smarter Storage: a persistent client-side database adopted by all the popular browsers
5 – Better Interactions: <canvas> is the drawing tag that almost replaces Flash
4 – Game Development: lotsa tutorials
3 – Legacy/Cross Browser Support: add a JavaScript shiv for the old, stubborn browsers
2 – Mobile, Mobile, Mobile: the most mobile ready tool – Viewport, etc
1 – It’s the Future, Get with It! Don’t fear the reaper.

As it turns out, the details and summary tag is currently only supported in Chrome 12 and above. To mitigate for this general laziness, you will have to use jQuery 1.7+ and the details-polyfill in the link belolw. HTML5shiv is also needed for IE8 and earlier.

My plan is to start using it without installing anything else. If it’s not working in a few browsers, the text is still displayed, which is good enough.

Does your browser render the above well?

Sources / More info: hk, tymp, caniuse-details, details-polyfill, HTML5shiv, source.zip

More designer resources: html5, mobile, simple drop down, qrhacker, kwout, multilingual, typography1, typography2