Thursday, March 28, 2024

Using the Details Markup Element in your HTML5 Web Pages

10/22/13

Introduction

HTML5 specification introduces many new markup elements to make web programming better. One of the new markup elements is the “details” markup element, which represents a widget from which the user can obtain additional information or controls.

 

The HTML5 specification says…

The HTML5 specification for the details markup element (http://www.w3.org/html/wg/drafts/html/CR/interactive-elements.html#the-details-element) declares the details element as:

IDLinterface HTMLDetailsElement : HTMLElement {

           attribute boolean open;

};

 

A detail markup element can contain a summary markup element, which represents the summary of the details.

A detail markup element can also contain an attribute field called “open”. When this attribute is present, it implies that summary and additional information in the details element is to be shown to the user. When absent, only the summary needs to be shown to the user.

 

Hands-On

 

Let us build a simple HTML web page using the details markup. We will have two details markup elements in the page, one with the open attribute and the other without.

The listing of the page is below.

<!DOCTYPE html>

<html>

<meta charset=”utf-8″>

<title>Details sample</title>

<body>

 

 

    <header>

        <h1>Details markup element sample</h1>

        <p>Demo showing details markup element</p>

    </header>

    <details id=”detailwithopen open>

        <summary>

            Summary element (will be shown by default).

        </summary>

        <input type=”checkbox” name=”checkboxwithopen“>Checkbox (will be shown by default)</input>

    </details>

    <details id=”detailwithoutopen“>

        <summary>

            Summary element (will be shown by default).

        </summary>

        <input type=”checkbox” name=”checkboxwithoutopen“>Checkbox (will not be shown by default)</input>

    </details>

    <footer>

 

        <p>HTML Goodies</p>

    </footer>

 

    <script type=”text/javascript“>

    </script>

</body>

</html>

 

The above listing is also available for download from <download link>. Currently, details markup element is only supported by Google Chrome browser.

When the page is opened in Chrome, you will notice that the first details element is expanded by default.

 

When you click on the “arrow” for the second summary element, the additional information (second checkbox is revealed).

The details markup element can be used to hide FAQs (when represented as additional content under a details markup element) from the main content of the page, allowing the user to choose to display the content when he/she is done reading the main content.

 

Summary

In this article, we learned about the details markup element. I hope you have found this information useful.

 

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured