HTML <details> tagS2C Home   « HTML <details> tag

Definition

The <details> tag is used to specify additional information the user can open or close interactively.

Must be used with the <summary> child element which displays a heading for the contents of the <details> element.

The <details> tag was introduced in HTML5.

Example


<details>
  <summary>Server2Client Website</summary>
    <p>Tutorials on client and server programming.</p>
</details>
<hr>
<details open>
  <summary>HTML5</summary>
    <p>Latest Specification.</p>
</details>
Server2Client Website

Tutorials on client and server programming.

HTML5

Latest Specification.

In the examples above we are creating two details elements, the second of which is open and you can see the summary contents.

Attributes

The following attributes can be used with the <details> tag.


<details> Specific Attributes
Attribute Value Description Example
openempty string or openSpecifies whether the information in the <details> tag is open or closed. 

<details open>Details content</details>
<details open="open">Details content</details>
<details> Global Attributes
Attribute Description Example
Common
classSpecifies a classname for the element allowing you to apply the style of the predefined class to the content. 

<details class="name">Details content</details>
idSpecifies a unique id for the element allowing you to apply the style of the predefined id to the content. 

<details id="name">Details content</details>
styleSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<details style="color:red;">Details content</details>
titleSpecifies an inline style for the element allowing you to apply the style to the content. 

<details title="Content info">Details content</details>
Keyboard
accesskeySpecifies a keyboard shortcut to associate with the element. 

<details accesskey="a">Details content</details>
tabindexSpecifies a tab order for the element. 

<details tabindex="1">Details content</details>
Language
dirSpecifies the directional flow of the content. 

<!-- The text will flow from left to right -->
<details dir="ltr">Details content</details>
<!-- The text will flow from right to left -->
<details dir="rtl">Details content</details>
langSpecifies a language code for the content of the element. 

<details lang="en">Details content</details>
spellcheckSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<!-- Valid values true and false. -->
<!-- Default inherited / browser specific. -->
<details spellcheck="true">Details content</details>
translateSpecifies an inline style for the element allowing you to apply the style to the content. 

<!-- Valid values yes and no. -->
<!-- Default yes. -->
<details translate="no">Details content</details>
Miscellaneous
contenteditableSpecifies whether the content of the element is editable. 

<!-- Valid values true and false. -->
<!-- Default inherited. -->
<details contenteditable="true">Details content</details>
draggableSpecifies whether the element is draggable. 

<!-- Valid values true and false. -->
<!-- Default browser specific. -->
<details draggable="true">Details content</details>
hiddenSpecifies whether the element is not yet, or no longer, relevant. 

<!-- Valid values an empty string or hidden -->
<details hidden>Details content</details> 
<details hidden="hidden">Details content</details>
<details> Event Attributes
Attribute Description Example
Document Element
oncopyThe script to be run when the user copies the content of an element. 

 <!-- Executes go() function -->
<details oncopy="go()">Details content</details>
oncutThe script to be run when the user cuts the content of an element. 

 <!-- Executes go() function -->
<details oncut="go()">Details content</details>
onpasteThe script to be run when the user pastes some content into an element. 

 <!-- Executes go() function -->
<details onpaste="go()">Details content</details>
Drag and Drop
ondragThe script to be run when an element is dragged. 

 <!-- Executes go() function -->
<details ondrag="go()">Details content</details>
ondragendThe script to be run when an element has stopped being dragged. 

 <!-- Executes go() function -->
<details ondragend="go()">Details content</details>
ondragenterThe script to be run when an element has been dragged to a valid drop target. 

 <!-- Executes go() function -->
<details ondragenter="go()">Details content</details>
ondragleaveThe script to be run when an element leaves a valid drop target. 

 <!-- Executes go() function -->
<details ondragleave="go()">Details content</details>
ondragoverThe script to be run when an element is being dragged over a valid drop target. 

 <!-- Executes go() function -->
<details ondragover="go()">Details content</details>
ondragstartThe script to be run at the start of a drag operation. 

 <!-- Executes go() function -->
<details ondragstart="go()">Details content</details>
ondropThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<details ondrop="go()">Details content</details>
Form
onblurThe script to be run when the element loses focus. 

 <!-- Executes go() function -->
<details onblur="go()">Details content</details>
onchangeThe script to be run when object changed and attempt to leave field. 

 <!-- Executes go() function -->
<details onchange="go()">Details content</details>
oncontextmenuThe script to be run when a context menu is triggered. 

 <!-- Executes go() function -->
<details oncontextmenu="go()">Details content</details>
onfocusThe script to be run when the element gets focus. 

 <!-- Executes go() function -->
<details onfocus="go()">Details content</details>
oninputThe script to be run when an element gets user input. 

 <!-- Executes go() function -->
<details oninput="go()">Details content</details>
oninvalidThe script to be run when an element is invalid. 

 <!-- Executes go() function -->
<details oninvalid="go()">Details content</details>
onresetThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<details onreset="go()">Details content</details>
onselectThe script to be run when some or all of the contents of an object are selected. 

 <!-- Executes go() function -->
<details onselect="go()">Details content</details>
onsubmitThe script to be run when a form is submitted. 

 <!-- Executes go() function -->
<details onsubmit="go()">Details content</details>
Keyboard
onkeydownThe script to be run when an element is in focus and keyboard key is pressed down. 

 <!-- Executes go() function -->
<details onkeydown="go()">Details content</details>
onkeypressThe script to be run when an element is in focus and keyboard key is pressed down and released. 

 <!-- Executes go() function -->
<details onkeypress="go()">Details content</details>
onkeyupThe script to be run when an element is in focus and keyboard key is released. 

 <!-- Executes go() function -->
<details onkeyup="go()">Details content</details>
Media
onabortThe script code to be run on abort. 

 <!-- Executes go() function -->
<details onabort="go()">Details content</details>
oncanplayThe script to be run when a file has buffered enough so it is ready to start playing. 

 <!-- Executes go() function -->
<details oncanplay="go()">Details content</details>
oncanplaythroughThe script to be run when a file can be played all the way to the end without further need of buffering. 

 <!-- Executes go() function -->
<details oncanplaythrough="go()">Details content</details>
oncuechangeThe script to be run when the cue changes when using the track element. 

 <!-- Executes go() function -->
<details oncuechange="go()">Details content</details>
ondurationchangeThe script to be run when the length of the media is changed. 

 <!-- Executes go() function -->
<details ondurationchange="go()">Details content</details>
onemptiedThe script to be run when a media resource element suddenly becomes empty, usually due to an error. 

 <!-- Executes go() function -->
<details onemptied="go()">Details content</details>
onendedThe script to be run when the media has reach the end. 

 <!-- Executes go() function -->
<details onended="go()">Details content</details>
onloadeddataThe script to be run when media data is loaded and playback can start. 

 <!-- Executes go() function -->
<details onloadeddata="go()">Details content</details>
onloadedmetadataThe script to be run when metadata has been loaded. 

 <!-- Executes go() function -->
<details onloadedmetadata="go()">Details content</details>
onloadstartThe script to be run whenthe media resource has started loading. 

 <!-- Executes go() function -->
<details onloadstart="go()">Details content</details>
onpauseThe script to be run when the media resource has been paused. 

 <!-- Executes go() function -->
<details onpause="go()">Details content</details>
onplayThe script to be run when the media resource starts playback. 

 <!-- Executes go() function -->
<details onplay="go()">Details content</details>
onplayingThe script to be run when when playback has already begun. 

 <!-- Executes go() function -->
<details onplaying="go()">Details content</details>
onprogressThe script to be run when the browser is fetching the media data. 

 <!-- Executes go() function -->
<details onprogress="go()">Details content</details>
onratechangeThe script to be run when the playback rate changes. 

 <!-- Executes go() function -->
<details onratechange="go()">Details content</details>
onseekedThe script to be run when the seeking attribute is set to false indicating that seeking has finished. 

 <!-- Executes go() function -->
<details onseeked="go()">Details content</details>
onseekingThe script to be run when the seeking attribute is set to true indicating that seeking is currently active. 

 <!-- Executes go() function -->
<details onseeking="go()">Details content</details>
onstalledThe script to be run when the browser is unable to continue fetching media data. 

 <!-- Executes go() function -->
<details onstalled="go()">Details content</details>
onsuspendThe script to be run when media data has stopped before being completely loaded. 

 <!-- Executes go() function -->
<details onsuspend="go()">Details content</details>
ontimeupdateThe script to be run when the media resources current playback position has changed. 

 <!-- Executes go() function -->
<details ontimeupdate="go()">Details content</details>
onvolumechangeThe script to be run when the volume has changed or been muted. 

 <!-- Executes go() function -->
<details onvolumechange="go()">Details content</details>
onwaitingThe script to be run when the media resource has paused but is expected to resume. 

 <!-- Executes go() function -->
<details onwaiting="go()">Details content</details>
Mouse
onclickThe script to be run when when a mouse is clicked on an element. 

 <!-- Executes go() function -->
<details onclick="go()">Details content</details>
ondblclickThe script to be run when a mouse is double clicked on an element. 

 <!-- Executes go() function -->
<details ondblclick="go()">Details content</details>
onmousedownThe script to be run when he mouse button is pressed down while the cursor is over an element. 

 <!-- Executes go() function -->
<details onmousedown="go()">Details content</details>
onmousemoveThe script to be run when the mouse button is moved. 

 <!-- Executes go() function -->
<details onmousemove="go()">Details content</details>
onmouseoutThe script to be run when the mouse cursor moves off an element. 

 <!-- Executes go() function -->
<details onmouseout="go()">Details content</details>
onmouseoverThe script to be run when the mouse cursor moves over an element. 

 <!-- Executes go() function -->
<details onmouseover="go()">Details content</details>
onmouseupThe script to be run when the mouse button is released while the cursor is over the element. 

 <!-- Executes go() function -->
<details onmouseup="go()">Details content</details>
onwheelThe script to be run when the mouse wheel rolls up or down over an element. 

 <!-- Executes go() function -->
<details onwheel="go()">Details content</details>
Scroll
onscrollThe script code to be run when the scrollbar of an element is being scrolled. 

 <!-- Executes go() function -->
<details onscroll="go()">Details content</details>
Window - NONE

Relevant HTML Tutorials

Widgets / Miscellaneous