HTML 5 <details> Tag

The HTML <details> tag specifies additional details that the user can view or hide on demand.

It can be used in conjunction with the HTML5 <summary> tag to provide a heading that can be clicked on to expand/collapse the details as required.

The <details> tag was introduced in HTML 5.

Example

Here is an example of the HTML code used to specify the <details> element.

Note: At the time of writing, no browser supports the <details> element. This example is based on the W3C HTML 5 Working Draft, and is solely to demonstrate the context of this tag.

Source CodeResult

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

AttributeDescription
openSpecifies whether the details should be open (visible to the user) or closed (hidden from the user).

This is a boolean attribute. If the attribute is present, its value 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 values:

  • [Empty string]
  • open

Global Attributes

The following attributes are standard across all HTML 5 tags.

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Here are the standard HTML 5 event handler content attributes.

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Also see the HTML 4.01 tags


Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites

Check a Domain:

ZappyHost Logo
Webydo Banner Ad
Webydo Banner Ad