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
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
