HTML <summary> tagS2C Home   « HTML <summary> tag

Definition

The <summary> tag is used to define a header within the <details> tag where summary information can be clicked on to show/hide it.

The <summary> tag must be the first child element within the <details> tag.

The <summary> tag was introduced in HTML5.

Examples


<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 <summary> tag.


<summary> Specific Attributes
Attribute Value Description Example
There are no required or optional attributes specific to the <summary> tag.
<summary> 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. 

<summary class="name">Summary text</code>
idSpecifies a unique id for the element allowing you to apply the style of the predefined id to the content. 

<summary id="name">Summary text</code>
styleSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<summary style="color:red;">Summary text</code>
titleSpecifies an inline style for the element allowing you to apply the style to the content. 

<summary title="Content info">Summary text</code>
Keyboard
accesskeySpecifies a keyboard shortcut to associate with the element. 

<summary accesskey="a">Summary text</code>
tabindexSpecifies a tab order for the element. 

<summary tabindex="1">Summary text</code>
Language
dirSpecifies the directional flow of the content. 

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

<summary lang="en">Summary text</code>
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. -->
<summary spellcheck="true">Summary text</code>
translateSpecifies an inline style for the element allowing you to apply the style to the content. 

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

<!-- Valid values true and false. -->
<!-- Default inherited. -->
<summary contenteditable="true">Summary text</code>
draggableSpecifies whether the element is draggable. 

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

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

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

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

 <!-- Executes go() function -->
<summary onpaste="go()">Summary text</code>
Drag and Drop
ondragThe script to be run when an element is dragged. 

 <!-- Executes go() function -->
<summary ondrag="go()">Summary text</code>
ondragendThe script to be run when an element has stopped being dragged. 

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

 <!-- Executes go() function -->
<summary ondragenter="go()">Summary text</code>
ondragleaveThe script to be run when an element leaves a valid drop target. 

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

 <!-- Executes go() function -->
<summary ondragover="go()">Summary text</code>
ondragstartThe script to be run at the start of a drag operation. 

 <!-- Executes go() function -->
<summary ondragstart="go()">Summary text</code>
ondropThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<summary ondrop="go()">Summary text</code>
Form
onblurThe script to be run when the element loses focus. 

 <!-- Executes go() function -->
<summary onblur="go()">Summary text</code>
onchangeThe script to be run when object changed and attempt to leave field. 

 <!-- Executes go() function -->
<summary onchange="go()">Summary text</code>
oncontextmenuThe script to be run when a context menu is triggered. 

 <!-- Executes go() function -->
<summary oncontextmenu="go()">Summary text</code>
onfocusThe script to be run when the element gets focus. 

 <!-- Executes go() function -->
<summary onfocus="go()">Summary text</code>
oninputThe script to be run when an element gets user input. 

 <!-- Executes go() function -->
<summary oninput="go()">Summary text</code>
oninvalidThe script to be run when an element is invalid. 

 <!-- Executes go() function -->
<summary oninvalid="go()">Summary text</code>
onresetThe script to be run when a dragged element is being dropped. 

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

 <!-- Executes go() function -->
<summary onselect="go()">Summary text</code>
onsubmitThe script to be run when a form is submitted. 

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

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

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

 <!-- Executes go() function -->
<summary onkeyup="go()">Summary text</code>
Media
onabortThe script code to be run on abort. 

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

 <!-- Executes go() function -->
<summary oncanplay="go()">Summary text</code>
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 -->
<summary oncanplaythrough="go()">Summary text</code>
oncuechangeThe script to be run when the cue changes when using the track element. 

 <!-- Executes go() function -->
<summary oncuechange="go()">Summary text</code>
ondurationchangeThe script to be run when the length of the media is changed. 

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

 <!-- Executes go() function -->
<summary onemptied="go()">Summary text</code>
onendedThe script to be run when the media has reach the end. 

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

 <!-- Executes go() function -->
<summary onloadeddata="go()">Summary text</code>
onloadedmetadataThe script to be run when metadata has been loaded. 

 <!-- Executes go() function -->
<summary onloadedmetadata="go()">Summary text</code>
onloadstartThe script to be run whenthe media resource has started loading. 

 <!-- Executes go() function -->
<summary onloadstart="go()">Summary text</code>
onpauseThe script to be run when the media resource has been paused. 

 <!-- Executes go() function -->
<summary onpause="go()">Summary text</code>
onplayThe script to be run when the media resource starts playback. 

 <!-- Executes go() function -->
<summary onplay="go()">Summary text</code>
onplayingThe script to be run when when playback has already begun. 

 <!-- Executes go() function -->
<summary onplaying="go()">Summary text</code>
onprogressThe script to be run when the browser is fetching the media data. 

 <!-- Executes go() function -->
<summary onprogress="go()">Summary text</code>
onratechangeThe script to be run when the playback rate changes. 

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

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

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

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

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

 <!-- Executes go() function -->
<summary ontimeupdate="go()">Summary text</code>
onvolumechangeThe script to be run when the volume has changed or been muted. 

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

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

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

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

 <!-- Executes go() function -->
<summary onmousedown="go()">Summary text</code>
onmousemoveThe script to be run when the mouse button is moved. 

 <!-- Executes go() function -->
<summary onmousemove="go()">Summary text</code>
onmouseoutThe script to be run when the mouse cursor moves off an element. 

 <!-- Executes go() function -->
<summary onmouseout="go()">Summary text</code>
onmouseoverThe script to be run when the mouse cursor moves over an element. 

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

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

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

 <!-- Executes go() function -->
<summary onscroll="go()">Summary text</code>
Window - NONE

Relevant HTML Tutorials

Widgets / Miscellaneous