Making sense of HTML5 - Build Windows 8 Apps with HTML5 and JavaScript - page 32

Miscellany of other new elements
Semantic block elements represent the largest family of new elements in HTML5. As mentioned,
semantic elements are important not so much for the effect they produce in the page but because
they increase the readability of the page significantly for developers, software, and especially
browsers for disabled users.
Semantic block elements alone do not produce significant changes in the way in which HTML5-
compliant browsers render the page. For example, to color and position a sidebar (that is, the <aside>
element) where you like you still need to resort to CSS settings. However, using semantic elements
reduces the noise of having too many generic DIV block elements whose role and scope is not
immediately clear.
In addition to semantic elements, HTML5 provides a few new elements with an embedded
behavior that couldn't be obtained in earlier versions of HTML without resorting to a combination of
CSS, markup, and JavaScript. Let's see a few examples.
The details element
Many times you have small pieces of content in a page that you want to show or hide on demand.
A good example is the title of some news and its actual content. Sometimes you want to display only
the title but want to leave users free from clicking to expand the content and hide it to gain more
space.
Before HTML5, you had to code all of this manually using a bit of HTML, CSS, and JavaScript code.
In HTML5, the entire logic is left to the browser and all you have to do is type the following in an
HTML page.
<details open>
<summary>This is the title</summary>
<div>
This is the text of the news and was initially kept hidden from view
</div>
</details>
The <details> element is interpreted by the browser and used to implement a collapsible panel.
The open attribute indicates whether you want the content to be displayed initially or not. The
<summary> child element indicates the text for the clickable placeholder, whereas the remaining
content is hidden or shown on demand. Note that all parts of the <details> element can be further
styled at will using CSS.
Important Although the Visual Studio editor recognizes the <details> element and even
offers IntelliSense for it, the element is not supported by Internet Explorer 10. Other
HTML5-compliant browsers, however, do support it—specifically the latest versions of
Chrome and Opera.