From 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 7 Apr 2024 13:41:34 -0500 Subject: new repository --- devdocs/html/element%2Fsummary.html | 145 ++++++++++++++++++++++++++++++++++++ 1 file changed, 145 insertions(+) create mode 100644 devdocs/html/element%2Fsummary.html (limited to 'devdocs/html/element%2Fsummary.html') diff --git a/devdocs/html/element%2Fsummary.html b/devdocs/html/element%2Fsummary.html new file mode 100644 index 00000000..0c9ddf94 --- /dev/null +++ b/devdocs/html/element%2Fsummary.html @@ -0,0 +1,145 @@ +

<summary>: The Disclosure Summary element

The <summary> HTML element specifies a summary, caption, or legend for a <details> element's disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

The <summary> element's contents can be any heading content, plain text, or HTML that can be used within a paragraph.

A <summary> element may only be used as the first child of a <details> element. When the user clicks on the summary, the parent <details> element is toggled open or closed, and then a toggle event is sent to the <details> element, which can be used to let you know when this state change occurs.

+
+

Default label text

+

If a <details> element's first child is not a <summary> element, the user agent will use a default string (typically "Details") as the label for the disclosure box.

+

Default style

+
+

Per the HTML specification, the default style for <summary> elements includes display: list-item. This makes it possible to change or remove the icon displayed as the disclosure widget next to the label from the default, which is typically a triangle.

You can also change the style to display: block to remove the disclosure triangle.

See the Browser compatibility section for details, as not all browsers support full functionality of this element yet.

For Webkit-based browsers, such as Safari, it is possible to control the icon display through the non-standard CSS pseudo-element ::-webkit-details-marker. To remove the disclosure triangle, use summary::-webkit-details-marker { display: none }.

+
+

Examples

+

Below are some examples showing <summary> in use. You can find more examples in the documentation for the <details> element.

+

Basic example

+
+

A simple example showing the use of <summary> in a <details> element:

+

html

+
<details open>
+  <summary>Overview</summary>
+  <ol>
+    <li>Cash on hand: $500.00</li>
+    <li>Current invoice: $75.30</li>
+    <li>Due date: 5/6/19</li>
+  </ol>
+</details>
+
+

Result

+
+ + +
+
+

Summaries as headings

+
+

You can use heading elements in <summary>, like this:

+

html

+
<details open>
+  <summary><h4>Overview</h4></summary>
+  <ol>
+    <li>Cash on hand: $500.00</li>
+    <li>Current invoice: $75.30</li>
+    <li>Due date: 5/6/19</li>
+  </ol>
+</details>
+
+

Result

+
+ + +

This currently has some spacing issues that could be addressed using CSS.

Warning: Because the <summary> element has a default role of button (which strips all roles from child elements), this example will not work for users of assistive technologies such as screen readers. The <h4> will have its role removed and thus will not be treated as a heading for these users.

+
+

HTML in summaries

+
+

This example adds some semantics to the <summary> element to indicate the label as important:

+

html

+
<details open>
+  <summary><strong>Overview</strong></summary>
+  <ol>
+    <li>Cash on hand: $500.00</li>
+    <li>Current invoice: $75.30</li>
+    <li>Due date: 5/6/19</li>
+  </ol>
+</details>
+
+

Result

+
+ + +
+
+

Technical summary

+
Permitted content Phrasing content or one element of Heading content
Tag omission None; both the start tag and the end tag are mandatory.
Permitted parents The <details> element.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-summary-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
summary127949No156418491461.0
display_list_item898949No75No89894963No15.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary +

+
-- cgit v1.2.3