Interactive Elements
Some elements have built-in interactivity, meaning they do something when you interact with them. A common example of this is links, which respond when you hover or click, but there are some new elements that offer other kinds of interactivity.
Details & Summary
Created for what is traditionally referred to as an "accordion" widget, the paired details and summary elements can be used to show a snippet introductory or "summary" content that can be expanded / toggled open to show further "detail" content. These elements are useful for scenarios like a FAQ where users need to be able to quickly scan and parse a large amount of information.
In the above example, try changing the text that shows when the element is collapsed. Try changing the text that shows when the element is opened. Try adding additional paragraph to show only when the element is opened. For a more ambitious experiment, try adding a second details element with its own content for closed and opened states.
Dialog
The new dialog element is for pop-up content in what would traditionally be referred to as a modal or lightbox. when open, it overlays the normal page content.
The dialog element is hidden by default, but can be set to display using the open attribute like so: <dialog open>. The typical way to toggle a dialog open and closed is to use a little javascript, attaching the open event to a button or other element.
Video Lesson
The following video demo is fully interactive. You can pause at any time to directly edit the code, and resume playback to restore to where you left off.