<datalist>
- Provides a native autocomplete feature for standard
<input> elements.
- Linked to the input using the
list attribute on the input and the id on the datalist.
- Eliminates the need for heavy third-party JavaScript dropdown libraries for basic search suggestions.
- Allows users to either select from the predefined options or type their own custom value.
<dialog>
- Creates highly accessible native modal and non-modal dialog boxes.
- Automatically handles focus trapping (keeping keyboard navigation inside the modal) when opened natively.
- Controlled via standard DOM API methods:
show(), showModal(), and close().
- Includes a native
::backdrop pseudo-element for easy background dimming.
<details> & <summary>
- Creates native disclosure widgets (accordions) without a single line of JavaScript.
- The
<summary> tag acts as the clickable heading or label that toggles the state.
- Automatically manages an
open attribute when expanded or collapsed.
- Highly accessible for screen readers, announcing the expanded/collapsed state inherently.
<progress>
- Represents the completion progress of a dynamic task (e.g., file upload, form completion).
- Utilizes
value and max attributes to define the current state of completion.
- Can be indeterminate (bouncing animation) if the
value attribute is omitted.
- Provides better semantic meaning to assistive technologies than a styled
<div>.
<meter>
- Displays a scalar measurement within a known range, unlike
<progress> which tracks a task.
- Perfect for UI elements like disk usage gauges, password strength indicators, or relevance scores.
- Supports advanced attributes:
min, max, low, high, and optimum.
- Browsers can automatically change the native color (e.g., green to red) based on the optimum/low/high thresholds.
<output>
- Semantically represents the result of a calculation or a user action within a form.
- Can use the
for attribute to explicitly link the output to the IDs of the inputs that generated it.
- Ideal for features like live price calculators, character counters, or range slider readouts.
- Treated as a live region by many screen readers, alerting users when the calculated value changes.
<mark>
- Represents text that is highlighted for reference or specific relevance in a given context.
- Commonly used to visually highlight search query matches within a block of search results.
- Carries semantic meaning indicating "relevance", unlike a generic
<span> with a yellow background.
- Defaults to a yellow background and black text in most modern browsers.
<kbd>
- Semantically represents user input, typically originating from a keyboard, voice input, or terminal.
- Can be nested to represent complex multi-key combinations (e.g.,
<kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd>).
- Rendered by default in the browser's monospace font to distinguish it from surrounding prose.
- Excellent for technical documentation, tutorials, and displaying application shortcuts.
<time>
- Represents a specific period in time or a date in a standardized, machine-readable format.
- Relies heavily on the
datetime attribute (e.g., datetime="2026-06-10") to translate human-readable text into precise data.
- Improves SEO by helping search engines confidently parse publishing dates and event schedules.
- Useful for browser extensions or applications that sync dates to user calendars.
<template>
- Holds complex HTML fragment structures hidden from the user until instantiated via JavaScript.
- The browser parses the content for validity, but it is entirely inert (scripts don't run, images don't load) until cloned.
- Serves as the native foundation for Web Components and building reusable DOM structures efficiently.
- Cloning a template fragment is generally faster and safer than using
innerHTML to generate UI components.