The HTML5 details Element

HTML5 tosses its hat into the ring with the details and summary elements. At their simplest, the new tags look something like this:
<details>

<summary> W Group FINANCIAL Holdings, 2012</summary>

<ul>

<li>60% of Burmese Railways

<li>55% Taggart Railways

<li>5% Reardon Steel

</ul>

</details>

By default, only the immediate <summary> content is displayed on the page, with the rest of the information hidden. A browser that supports both elements should produce a UI widget beside the <summary> tag; clicking on the interface will reveal the entire content.

I’ll admit that using details and summary isn’t particularly instinctive: I always seem to forget that the <details> tag surrounds the entirety of the information, while the <summary> acts as the “heading” for the element.

WARNINGS FROM THE VALIDATOR

The W3C validator will flag use of details in your code. That doesn’t mean that the code won’t work or that it’s wrong, just that the W3C is suggesting that you might allow a few more months before using the markup in production.

I’m excited by potential of the elements I’ve used them in the redesign of this blog, which will be launched in May. Next, I’ll show you how to wire in compatibility with browsers that don’t yet support the tags, and customize their appearance.