About this specification

This specification is like no other — it has been processed with you, the humble web developer, in mind.

The focus of this specification is readability and ease of access. Unlike the full HTML Standard, this "developer's edition" removes information that only browser vendors need know. It is automatically produced from the full specification by our build tooling, and thus always in sync with the latest developments in HTML.

To read about its conception, construction, and future, read the original press release, and the blog post about its relaunch.

Finally, feel free to contribute on GitHub to make this edition better for everyone!

    1. 4.11 Interactive elements
      1. 4.11.1 The details element
      2. 4.11.2 The summary element
      3. 4.11.3 Commands
        1. 4.11.3.1 Facets
      4. 4.11.4 The dialog element

4.11 Interactive elements

4.11.1 The details element

Support: detailsChrome for Android 61+Chrome 12+iOS Safari 6.0+UC Browser for Android 11.4+Firefox 49+Samsung Internet 4+IE NoneSafari 6+Edge NoneAndroid Browser 4+Opera 15+

Source: caniuse.com

Categories:
Flow content.
Sectioning root.
Interactive content.
Palpable content.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
One summary element followed by flow content.
Tag omission in text/html:
Neither tag is omissible.
Content attributes:
Global attributes
open — Whether the details are visible
DOM interface:
Uses HTMLDetailsElement.

The details element represents a disclosure widget from which the user can obtain additional information or controls.

The details element is not appropriate for footnotes. Please see the section on footnotes for details on how to mark up footnotes.

The summary element child of the element, if any, represents the summary or legend of the details.

The rest of the element's contents represents the additional information or controls.

The open content attribute is a boolean attribute. If present, it indicates that both the summary and the additional information is to be shown to the user. If the attribute is absent, only the summary is to be shown.

The following example shows the details element being used to hide technical details in a progress report.

<section class="progress window">
 <h1>Copying "Really Achieving Your Childhood Dreams"</h1>
 <details>
  <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
  <dl>
   <dt>Transfer rate:</dt> <dd>452KB/s</dd>
   <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
   <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
   <dt>Duration:</dt> <dd>01:16:27</dd>
   <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
   <dt>Dimensions:</dt> <dd>320×240</dd>
  </dl>
 </details>
</section>

The following shows how a details element can be used to hide some controls by default:

<details>
 <summary><label for=fn>Name & Extension:</label></summary>
 <p><input type=text id=fn name=fn value="Pillar Magazine.pdf">
 <p><label><input type=checkbox name=ext checked> Hide extension</label>
</details>

One could use this in conjunction with other details in a list to allow the user to collapse a set of fields down to a small set of headings, with the ability to open each one.

In these examples, the summary really just summarizes what the controls can change, and not the actual values, which is less than ideal.

Because the open attribute is added and removed automatically as the user interacts with the control, it can be used in CSS to style the element differently based on its state. Here, a stylesheet is used to animate the color of the summary when the element is opened or closed:

<style>
 details > summary { transition: color 1s; color: black; }
 details[open] > summary { color: red; }
</style>
<details>
 <summary>Automated Status: Operational</summary>
 <p>Velocity: 12m/s</p>
 <p>Direction: North</p>
</details>

4.11.2 The summary element

Categories:
None.
Contexts in which this element can be used:
As the first child of a details element.
Content model:
Either: phrasing content.
Or: one element of heading content.
Tag omission in text/html:
Neither tag is omissible.
Content attributes:
Global attributes
DOM interface:
Uses HTMLElement.

The summary element represents a summary, caption, or legend for the rest of the contents of the summary element's parent details element.

4.11.3 Commands

4.11.3.1 Facets

A command is the abstraction behind menu items, buttons, and links. Once a command is defined, other parts of the interface can refer to the same command, allowing many access points to a single feature to share facets such as the Disabled State.

Commands are defined to have the following facets:

Label
The name of the command as seen by the user.
Access Key
A key combination selected by the user agent that triggers the command. A command might not have an Access Key.
Hidden State
Whether the command is hidden or not (basically, whether it should be shown in menus).
Disabled State
Whether the command is relevant and can be triggered or not.
Action
The actual effect that triggering the command will have. This could be a scripted event handler, a URL to which to navigate, or a form submission.

User agents may expose the commands that match the following criteria:

User agents are encouraged to do this especially for commands that have Access Keys, as a way to advertise those keys to the user.

For example, such commands could be listed in the user agent's menu bar.

4.11.4 The dialog element

Support: dialogChrome for Android 61+Chrome 37+iOS Safari NoneUC Browser for Android 11.4+Firefox NoneSamsung Internet 4+IE NoneOpera Mini NoneSafari NoneEdge NoneAndroid Browser 56+Opera 24+

Source: caniuse.com

Categories:
Flow content.
Sectioning root.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Flow content.
Tag omission in text/html:
Neither tag is omissible.
Content attributes:
Global attributes
open — Whether the dialog box is showing
DOM interface:
Uses HTMLDialogElement.

The dialog element represents a part of an application that a user interacts with to perform a task, for example a dialog box, inspector, or window.

The open attribute is a boolean attribute. When specified, it indicates that the dialog element is active and that the user can interact with it.

Removing the open attribute will usually hide the dialog. However, doing so has a number of strange additional consequences:

For these reasons, it is generally better to never remove the open attribute manually. Instead, use the close() method to close the dialog, or the hidden attribute to hide it.

The tabindex attribute must not be specified on dialog elements.

dialog . show()

Displays the dialog element.

dialog . showModal()

Displays the dialog element and makes it the top-most modal dialog.

This method honors the autofocus attribute.

dialog . close( [ result ] )

Closes the dialog element.

The argument, if provided, provides a return value.

dialog . returnValue [ = result ]

Returns the dialog's return value.

Can be set, to update the return value.

This dialog box has some small print. The main element is used to draw the user's attention to the more important parts.

<dialog>
 <h1>Add to Wallet</h1>
 <main>
  <p>How many gold coins do you want to add to your wallet?</p>
  <p><input name=amt type=number min=0 step=0.01 value=100></p>
 </main>
 <p><small>You add coins at your own risk.</small></p>
 <p><label><input name=round type=checkbox> Only add perfectly round coins </label>
 <p><input type=button onclick="submit()" value="Add Coins"></p>
</dialog>