One small page that uses every element of this section. Turn on Show tags and point at any part of
the page: a label tells you which element draws it. Click to jump to that element's details below.
Interactive elementsWritten for this site
Every element of this section is in the page above. Point at one to find it, click it to read its details.
Tags with a dashed border are not drawn on the page: look for them in the code below.
<div class="faq"> <h1>Frequently asked questions</h1> <p class="lead">Click a question: it opens without any JavaScript. Opening one closes the others, because they share the same name.</p> <details name="faq" open> <summary>Do I need to install anything?</summary> <p>No. A text editor and a browser are enough to write your first page.</p> </details> <details name="faq"> <summary>How long does it take to learn HTML?</summary> <p>A few days for the basics, then you keep learning by building pages.</p> </details> <details name="faq"> <summary>Is HTML a programming language?</summary> <p>It is a markup language: it describes what each part of the page is.</p> </details> <button type="button" class="open" command="show-modal" commandfor="contact">Still a question? Contact us</button> <dialog id="contact"> <h2>Contact us</h2> <p>This is a dialog box. The rest of the page is blocked until you close it.</p> <button type="button" command="close" commandfor="contact">Close</button> </dialog></div>
MDN The <details>HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an open state. A summary or label must be provided using the <summary> element.
Live previewExample from MDN
<details> <summary>Details</summary> Something small enough to escape casual notice.</details>
MDN 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.
Live previewExample from MDN
<details> <summary> I have keys but no doors. I have space but no room. You can enter but can't leave. What am I? </summary> A keyboard.</details>
MDN The <dialog>HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
Live previewExample from MDN
<button command="show-modal" commandfor="my-dialog">Open dialog</button><dialog id="my-dialog"> <p>This dialog was opened using an invoker command.</p> <button commandfor="my-dialog" command="close">Close</button></dialog>