NoScript Element
The content below will only show if JavaScript is disabled:
Template Element
Templates are used to hold client-side content that won't be rendered when the page loads:
Slot Element (Web Components)
Slots are used in web components for content projection:
Default Title
This is custom content inside the component!
Details and Summary
Click to expand: What are HTML details?
The <details>
element creates a disclosure widget where information is visible only when toggled open. The <summary>
element provides a summary or label for the details content.
- Great for FAQ sections
- Collapsible content areas
- Progressive disclosure of information
This section is open by default
You can use the open
attribute to make details expanded by default.
Nested Details Example
Details can be nested inside each other:
Inner Details
This is content inside nested details elements.
Even Deeper
You can nest as deep as needed!
Dialog Element
Progress and Meter Elements
Progress Examples:
File upload progress:
Indeterminate progress:
Meter Examples:
Disk usage:
Score:
Temperature:
Script Demonstrations
Tags Summary
This page demonstrates scripting and meta tags:
<noscript>
- Content for users without JavaScript<template>
- Client-side templates<slot>
- Web component content placeholders<details>
- Disclosure/collapsible content<summary>
- Summary for details elements<dialog>
- Modal and non-modal dialogs<progress>
- Progress indicators<meter>
- Scalar measurements<script>
- JavaScript code