Autocomplete

The <datalist> element sets recommended values for an <input> element. Browsers may show a dropdown menu of all values or match values as the user types.

The element is actually supported since a very long time, but Firefox and Safari do not support all features or have some bugs (only partial support). This is tracked by Can I use.

This code:

                
<label for="browser-choice">Choose a browser:</label>
<input list="browsers" id="browser-choice" name="browser-choice" />

<datalist id="browsers">
    <option value="Firefox"></option>
</datalist>
                
            

Results in this:

<dialog>

The <dialog> HTML element represents a modal or non-modal dialog box, such as a confirmation prompt or a subwindow used to enter data.

The <dialog> can be opened and closed with JavaScript methods:

• show()(modelessly, still allowing interaction with content outside of the dialog)
• showModal()(over the top of any other dialogs that might be present).

Can also be opened and closed via html:

• invoker commands
• closed by a <form method="dialog">
• closed by a <button formmethod="dialog"> inside a <form>

This code:

                
<button commandfor="my-dialog" command="show-modal">
  Show Modal
</button>
<dialog id="my-dialog" closedby="any">
  <form>
    <button formmethod="dialog" autofocus>Close</button>
  </form>
  <p>This modal dialog exists!</p>
</dialog>
                
            

Results in this:

Light-dismiss <dialog>

By default the <dialog> can be closed via the close buttons and Esc. You cannot dismiss it by clicking outside of the dialog (light dismiss). The closedby attribute can change that behavior.

Semantic measurement <meter>

The <meter> element represents a scalar value within a known range or a fractional value. The alternate name for this is gauge. Can be used to show disk usage, battery, ratings, etc. The meter element should not be used to indicate progress. Use the <progress> element for that.

This code:

                
<label for="meter-01">Low</label>
<meter id="meter-01" min="0" max="100" low="30" high="75" optimum="80" value="50"></meter>
                
            

Results in this:

The <progress> bar

The <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

This code:

                
<label for="file">File progress:</label>
<progress id="file" max="100" value="70">70%</progress>
                
            

Results in this:

<details>

The <details> element is a disclosure widget which can be expanded to reveal additional content. When closed, only the nested <summary> element is visible.

Mutually exclusive <details>

Multiple <details> elements which use the same name attribute are mutually exclusive. When one member of the group is opened, all other members are closed.

Range Slider

<input type="range"> elements let the user specify a numeric value which must be no less than a given value, and no more than another given value. A <datalist> can provide a list of predefined values to suggest to the user for this input.

This code:

                
<label for="volume">Name:</label>
<input type="range" id="volume" name="volume" min="0" max="20"/>
                
            

results in this:

While this code:

                
<label for="step-choice">Step:</label>
<input type="range" id="step-choice" min="1" max="5" list="steps" />
<datalist id="steps">
<option>1</option>
<option>2</option>
<option>3</option>
</datalist>
                
            

Results in this:

Invoker Commands Api

The command and commandfor attributes for the <button> HTML element dispatch an action to an element when the button is invoked (by click or keystroke), as a declarative alternative to addEventListener() calls or onclick attribute handlers. Can be used to pair html components.

The following commands are possible:

• "show-modal"
• "close"
• "request-close"
• "show-popover"
• "hide-popover"
• "toggle-popover"
• Custom values, prefixed with two hyphen characters "--" will be dispatched on the controlled element.

As OpenUI explains command/commandfor do replicate popovertarget’s functionality, the two will co-exist side by side for some while to enable a smooth transition. It is, however, intended that commandfor will replace popovertarget leading to popovertarget’s eventual deprecation.

If an element also has both a popovertarget and the command/commandfor attributes set, then popovertarget must be ignored: command takes precedence.

A polyfill exists.

This code:

                
<button commandfor="mypopover" command="toggle-popover">
  Toggle the popover
</button>
<div id="mypopover" popover>
  <button commandfor="mypopover" command="hide-popover">Close</button>
  Popover content
</div>
                
            

Results in this:

Popover Api

The popover HTML attribute creates an overlay to display content on top of other page content. Popovers can be shown declaratively using HTML, or using the showPopover() method.

While popovertarget sufficiently captured the use case for popovers, it fell short of providing the same developer & user experience for other interactive elements such as <dialog>. This is addressed with the invoker commands.

A polyfill exists.

This code:

                
<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>
                
            

Results in this:

Lazy-loading images and iframes

The loading="lazy" attribute for <img> and <iframe> elements blocks loading the external resource until the user scrolls to that element's part of the page.

The following code:

                
<img src="./img/box-green.png" loading='lazy' alt='Alternative Text'>
                
            

Will result in this:

Gallery

Relative Time

Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.

The following code:

                
<relative-time datetime="2025-10-23T22:30:00+02:00">
    October 23rd, 2025 10:30pm
</relative-time>
                
            

Looks like this in html: