BBM Tutor
BBM Tutor

HTML5 Tag - <details> Element

Definition & Uses of HTML5 <details> Element

The HTML5 <details> tag tag is one of the new elements in HTML 5.

Syntax of HTML5 <details> Tag

<details>
<p>more info about details</p>
</details>

What is HTML5 <details> Element?

  • The <details> tag is one of the tags for interactive content in HTML.
  • It is also one of the sectioning root tags, which means that the sections and headings inside the element are not included in the outline of any higher level sections.
  • The details element represents a disclosure widget from which the user can obtain additional information or controls. i.e., it provides additional information or controls that the user can obtain on demand.
  • The content of a <details> tag is hidden by default with a toggle arrow and the word "Details" available for readers to click and get more information. We should set open attribute as true to make the content of <details> tag visible.
  • Any sort of content can be put inside the <details> tag.
  • the <summary> tag is used with <details> tag to provide visible heading for details. This displays a title instead of the word "Details".
  • It must be closed properly with end tag.

Where to use HTML5 <details> Tag?

  • It is used to create a toggle feature without javascripts.
  • The <details> element used to holds a content like text, images, forms, etc. that we want to remain hidden by default or allow the user to hide when they don’t need it. It can include any content you want to add additional information to the page without displaying it until it is needed.
  • The <details> tag can be used to create an interactive widget and accordion-like widget that the user can toggle open and close.

Tips & Notes

  • The <details> element is not appropriate for footnotes.
  • The <details> element must not appear as a descendant of the <a> or <button> elements.
  • The <details> tag is currently only supported in Chrome and in Safari 6.

Simple HTML5 Example

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 <details> - HTML5 Tags Tutor </title>
</head>
<body>
<article>
<details>
<summary>Heading to Details</summary>
<p>More Info About Details</p>
</details>
</article>
</body>
</html>

Output Screen

Heading to Details

More info about details

Attributes

  • Attributes are the features added to a tag to provide the browser with more information about how the tag should appear or behave.
  • There are 3 type attributes a tag can have. They are Global Attributes, Event Attributes and Element-Specific Attributes.
  • The <details> tag is also capable of supporting the Global Attributes and Event Attributes in HTML5.

Element-Specific Attributes

Attributes

Description

Indicates whether the details will be shown to the user on page load.

open

  • This is Boolean attribute.
  • It specifies whether the details should be visible to the user or hidden from the user.
  • If this attribute present, the content of the details will be shown to the user when page loads. Otherwise additional details will be hidden only the word "Details" will be visible, user have to click on the details toggle arrow to view the additional information.
  • The value of this attribute must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either open or open="open").
  • Possible keywords for its values:
  • Empty_String
  • open

Simple HTML5 Example#2

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 <details> - HTML5 Tags Tutor </title>
</head>
<body>
<article>
<details>
<summary>Copying..... ( 50% Completed )</summary>
<ul>
<li>File name : bbminfo.jpg</li>
<li>From : Local Disk(C:)</li>
<li>To : Local Disk(E:)</li>
<li>File size: 104 KB</li>
</ul>
</details>
</article>
</body>
</html>

Output Screen

Copying..... ( 50% Completed )
  • File name : bbminfo.jpg
  • From : Local Disk(C:)
  • To : Local Disk(E:)
  • File size: 104 KB

Nested <details> tag

Simple HTML5 Example#3

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 <details> - HTML5 Tags Tutor </title>
</head>
<body>
<article>
<details>
<summary>HTML5 Introduction</summary>
<p> HTML5 is the fifth revision and newest version of the HTML standard. It offers new features that provide not only rich media support, but also enhance support for creating web applications that can interact with the user, his/her local data, and servers, more easily and effectively than was possible previously. Because HTML5 is still being developed, changes to the specifications are inevitable. Therefore, not all of its features are supported by all browsers yet. However, Gecko, and by extension, Firefox, has very good initial support for HTML5, and work continues toward supporting more of its features. </p>
</details>
<details>
<summary>HTML5 Tags</summary>
<p><!-->, <!DOCTYPE>, <a>, <abbr>, <acronym>, <address>, <applet>, <area>, <article>, <aside>, <audio>, <b>, <base>, <basefont>, <bdi>, <bdo>, <big>, <blockquote>, <body>, <br>, <button>, <canvas>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <command>, <datalist>, <dd>, <del>, <details>, <dfn>, <dialog>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <figcaption>, <figure>, <font>, <footer>, <form>, <frame>, <frameset>, <head>, <header>, <h1>, - <h6>, <hr>, <html>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <legend>, <li>, <link>, <map>, <mark>, <menu>, <meta>, <meter>, <nav>, <noframes>, <noscript>, <object>, <ol>, <optgroup>, <option>, <output>, <p>, <param>, <pre>, <progress>, <q>, <rp>, <rt>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <source>, <span>, <strike>, <strong>, <style>, <sub>, <summary>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <time>, <title>, <tr>, <track>, <tt>, <u>, <ul>, <var>, <video>, <wbr></p>
</details>
<details>
<summary>HTML5 Examples</summary>
<p><!DOCTYPE HTML> <html> <head> <title> HTML5 Tutorial </title> </head> <body> <article> <p> First HTML Page </p> </article> </body> </html></p>
</details>
</article>
</body>
</html>

Output Screen

HTML5 Introduction

HTML5 is the fifth revision and newest version of the HTML standard. It offers new features that provide not only rich media support, but also enhance support for creating web applications that can interact with the user, his/her local data, and servers, more easily and effectively than was possible previously. Because HTML5 is still being developed, changes to the specifications are inevitable. Therefore, not all of its features are supported by all browsers yet. However, Gecko, and by extension, Firefox, has very good initial support for HTML5, and work continues toward supporting more of its features.

HTML5 Tags

<!-->, <!DOCTYPE>, <a>, <abbr>, <acronym>, <address>, <applet>, <area>, <article>, <aside>, <audio>, <b>, <base>, <basefont>, <bdi>, <bdo>, <big>, <blockquote>, <body>, <br>, <button>, <canvas>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <command>, <datalist>, <dd>, <del>, <details>, <dfn>, <dialog>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <figcaption>, <figure>, <font>, <footer>, <form>, <frame>, <frameset>, <head>, <header>, <h1>, - <h6>, <hr>, <html>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <legend>, <li>, <link>, <map>, <mark>, <menu>, <meta>, <meter>, <nav>, <noframes>, <noscript>, <object>, <ol>, <optgroup>, <option>, <output>, <p>, <param>, <pre>, <progress>, <q>, <rp>, <rt>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <source>, <span>, <strike>, <strong>, <style>, <sub>, <summary>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <time>, <title>, <tr>, <track>, <tt>, <u>,<ul>,<var>,<video>, <wbr>

HTML5 Examples

<html>
<head>
<title> HTML5 Tutorial </title>
</head>
<body>
<article>
<p> First HTML Page </p>
</article>
</body>
</html>

BBM Invoice
 
Disclaimer: Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy.