Advanced HTML

Explore dialogs, templates, details, custom data attributes, content editing, and browser-integrated HTML features.

Details and Summary

The <details> element creates a disclosure widget. <summary> provides the visible control used to open and close it. These elements provide native behavior without requiring JavaScript for basic disclosure interactions.

Native Disclosure

<details>\n  <summary>What is HTML?</summary>\n  <p>HTML is the standard markup language for web documents.</p>\n</details>

💡 The browser provides the basic expand and collapse interaction.

Key Takeaways

details provides native disclosure behavior.
summary defines the visible disclosure label.

Knowledge Check

Which element provides the label for a details disclosure?

The Dialog Element

The <dialog> element represents a dialog box or other interactive subwindow. It can be shown non-modally with show() or modally with showModal() through JavaScript. The open attribute indicates that a dialog is currently open.

Dialog Markup

<dialog id="settingsDialog">\n  <h2>Settings</h2>\n  <p>Configure your preferences.</p>\n  <form method="dialog">\n    <button>Close</button>\n  </form>\n</dialog>\n\n<button onclick="settingsDialog.showModal()">Open Settings</button>

💡 The dialog can provide a native modal experience and the method=dialog form can close it.

Key Takeaways

dialog provides native semantics for dialogs.
showModal() opens a modal dialog.

Knowledge Check

Which method opens a dialog as a modal?

Template Element

The <template> element stores HTML that is not rendered immediately. Its contents can be cloned and inserted into the document using JavaScript. Templates are useful for reusable client-side fragments and Web Components.

HTML Template

<template id="userCardTemplate">\n  <article class="user-card">\n    <h2 class="name"></h2>\n  </article>\n</template>

💡 The template's content remains inert until JavaScript clones and inserts it.

Key Takeaways

Template content is inert until instantiated.
Templates are useful for reusable DOM fragments.

Knowledge Check

Is template content immediately rendered as normal page content?

Custom Data Attributes

The data-* attribute convention allows developers to attach custom data to HTML elements. JavaScript can access these values through the element's dataset property.

Using data-*

<button data-user-id="42" data-role="admin">View User</button>\n\n<script>\n  const button = document.querySelector('button');\n  console.log(button.dataset.userId);\n  console.log(button.dataset.role);\n</script>

💡 data-user-id becomes dataset.userId and data-role becomes dataset.role.

Key Takeaways

Custom attributes should use the data-* convention.
JavaScript accesses data-* values through dataset.

Knowledge Check

How is data-user-id accessed through dataset?

Details and Summary

The Dialog Element

Template Element

Custom Data Attributes

STAY UPDATED WITH BYTES!