HTML and CSS Reference
In-Depth Information
Figure 1.5. An example of the
<details>
and
<summary>
elements in action, first in the closed state, where only
the code inside the
<summary>
element is visible, and second in the open state, where the entire contents of the
<details>
element are visible.
The code to create the
<details>
and
<summary>
example is as follows:
<details>
<summary>
Section Heading
</summary>
This is an example of using
<
details
>
and
<
summary
>
to create collapsible content without using JavaScript.
</details>
Unfortunately, browser support for these new elements has been rather slow to date. For-
tunately, it's simple to provide a fallback for this using JavaScript, several of which are
provided at
http://mng.bz/cJhc
.
Using the techniques you learned in this section, you should now be able to update your ex-
isting applications to use HTML5 conventions, without having a negative impact on users
who lack the latest and greatest browser. In the next section, you'll learn how you can take
things further by going beyond HTML markup and using related concepts such as CSS3
and JavaScript to improve the style and interactivity of your documents.
1.2. Beyond the markup: additional web standards
As we mentioned, the web is no longer all about documents; it's a platform for application
development. As a result, HTML5 doesn't include only markup for outlining document
structure; it also encompasses many more features and associated specifications for ensur-
ing that your applications look great and provide the best possible experience to the user.
One example of this is microdata and the associated Microdata API, which enable you to
provide additional semantics in your documents and then retrieve and modify them. Anoth-
