Modern HTML elements
Use native disclosure, dialogs, progress and templates instead of rebuilding them.
What you will be able to do
- Build disclosures with details
- Open a native dialog
- Show progress without JavaScript
Modern HTML ships behaviour in the element itself. details, dialog, progress and template remove a surprising amount of custom JavaScript.
<details>
<summary>Do I need an account?</summary>
<p>Yes. Progress and certificates are tied to your account.</p>
</details>
<dialog id="confirm">
<form method="dialog">
<h2>Delete this note?</h2>
<p>This cannot be undone.</p>
<button value="cancel">Cancel</button>
<button value="confirm">Delete</button>
</form>
</dialog>
<button type="button" data-open="confirm">Delete note</button>
<label for="progress">Course progress</label>
<progress id="progress" value="7" max="12">7 of 12</progress>
<script>
document.querySelector("[data-open]").addEventListener("click", () => {
document.getElementById("confirm").showModal();
});
</script>- details and summary are keyboard accessible with no JavaScript.
- dialog.showModal() traps focus and closes with Escape.
- form method="dialog" returns the clicked button value.
- progress and meter expose their value to assistive technology.
Your turn
MediumAdd a FAQ and a dialog
Write one details block and a dialog with Cancel and Confirm buttons that closes itself.
HTML · starter
<details>
<summary>Question</summary>
<p>Answer</p>
</details>Check your understanding before moving on.
Knowledge checkQuestion 1
Which element provides a native expandable disclosure?
Select an answer to continue
Study tools
Make it yours.
Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.
Sign in to save notes and flashcards.Both are private to your account and stay with your progress.
Sign inFinished reading?
Lock in what you just learned.
0%
Mark this lesson complete to save your place and move one step closer to the certificate.