HTML
Baseline ReadyA practical reference for deciding whether an HTML feature is ready to use now.
- Widely available143features
- Newly available19features
- Limited support76features
Widely available
Widely available2D canvas
The CanvasRenderingContext2D API is the "2d" rendering context for the <canvas> element. It represents a flat, two-dimensional space for drawing graphics and animations.
captureStream() for <canvas>
The captureStream() method for <canvas> elements returns a MediaStream which includes a CanvasCaptureMediaStreamTrack representing real-time video of the canvas image. You can use this to record the canvas, or send it elsewhere, such as another canvas or WebRTC connection.
Offscreen canvas
The OffscreenCanvas API provides a canvas that can be drawn to off screen, with no dependencies on the DOM, which can be used to run heavy rendering operations inside a worker context.
WebGL
The WebGLRenderingContext API is the "webgl" rendering context for the <canvas> element. It represents a space for drawing two- and three-dimensional graphics and animations.
<meter>
The <meter> element represents a scalar value within a known range or a fractional value, typically shown as a progress bar.
<progress>
The <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Description list
The <dl>, <dt>, and <dd> HTML elements represent a list of terms and their associated descriptions. Use a description list to create glossaries or similar list of key-value pairs.
Tables
The <table> HTML element, with several related elements, represents tabular data in rows and columns of cells.
Gamepad
The navigator.getGamepads() API accesses and responds to signals from game controllers.
Geolocation API
The navigator.geolocation API requests the user's latitude, longitude, heading, and speed.
<address>
The <address> element represents contact information for a person or people, or for an organization.
<article>
The <article> element represents self-contained content, which is intended to be independently distributable or reusable, such as a comment, a blog post, or news article.
<figure> and <figcaption>
The <figure> and <figcaption> HTML elements represent an illustration, diagram, text, or other self-contained reference content, with an optional caption.
<h1> through <h6>
The <h1> through <h6> HTML elements represent six levels of section headings, in order of decreasing importance.
<ol>, <ul>, and <li>
The <ol>, <ul>, and <li> HTML elements represent ordered and unordered lists.
contenteditable
The contenteditable global HTML attribute allows the user to edit the content of an element, such as inserting or deleting text.
Encrypted media extensions
The mediaKeys property of HTMLMediaElement and the navigator.requestMediaKeySystemAccess() method control the playback of content subject to digital rights management. Also known as EME.
Media capture
The navigator.mediaDevices.getUserMedia() API requests access to devices that produce audio or video streams, such as microphones or video cameras.
<iframe>
The <iframe> element embeds another HTML page into the current page.
srcdoc
The srcdoc attribute for the <iframe> HTML element sets a string of HTML to embed in the document. The value of srcdoc overrides loading a document from the src attribute.
<button>
The <button> HTML element represents a button that triggers some action, such as submitting a form or opening a dialog, styled as a labeled rectangular box by default.
<fieldset> and <legend>
The <fieldset> and <legend> elements group several form control elements within a web form.
<form>
The <form> element contains interactive controls for submitting information.
<input type="button">
The <input type="button"> HTML element represents a button that triggers some action, such as submitting a form or opening a dialog, styled as a labeled rectangular box by default. Not to be confused with the <button> element, which contains HTML content.
<input type="checkbox">
The <input type="checkbox"> HTML element represents a tickable box with two states, checked and unchecked.
<input type="file" multiple>
The <input type="file" multiple> HTML element shows a file picker from which users can choose one or more files to upload with a form.
<input type="file">
The <input type="file"> HTML element shows a file picker from which users can choose a file to upload with the form.
<input type="hidden">
The <input type="hidden"> HTML element represents a form field that is not shown visually but is still included in the form submission.
<input type="image">
The <input type="image"> HTML element is an image that can be used to submit a form, like the <input type="submit"> element.
<input type="number">
The <input type="number"> HTML element represents numeric input data.
<input type="password">
The <input type="password"> HTML element represents a field for users to enter a password. The password is hidden from view, typically replaced by dots or asterisks.
<input type="radio">
The <input type="radio"> HTML element represents one button in a group such that only one can be chosen at a time.
<input type="range">
The <input type="range"> element represents a slider for choosing an inexact value between a minimum and maximum value.
<input type="reset">
The <input type="reset"> HTML element represents a button that sets all form fields to their initial values.
<input type="search">
The <input type="search"> HTML element represents a text field for search queries.
<input type="submit">
The <input type="submit"> HTML element represents a button that triggers an action on its associated <form>, such as sending the form data to a server.
<input>
The <input type="text"> HTML element allows the user to enter information into a form. By default, an <input> element is a text input.
<label>
The <label> HTML element represents a caption for a form field.
<output>
The <output> element represents the result of a calculation, user action, or form entry.
<select>
The <select> element provides a menu of options for a user to pick from, typically rendered as a dropdown list.
<textarea>
The <textarea> element represents an editing control that allows users to enter multi-line, free-form, plain text.
autofocus
The autofocus HTML attribute gives focus to an element on page load.
Constraint validation API
Methods that validate form controls before submission, such as checkValidity(), reportValidity() and setCustomValidity().
Date and time <input> types
The <input type="date"> and <input type="time"> HTML elements show date and time pickers.
dirname
The dirname attribute of <textarea> and <input> HTML elements includes the field's writing direction as form data on submission.
Email, telephone, and URL <input> types
The <input type="email">, <input type="tel">, and <input type="url"> HTML elements represent email address, telephone number, and URL fields in a form.
inputmode
The inputmode global HTML attribute gives a hint about what type of data is to be entered into an <input> element, such as text, numeric, or email, so the browser may help the user enter data using an adapted input mechanism, such as an on-screen virtual keyboard.
<canvas>
The <canvas> HTML element is a space to draw graphics in, using the 2D canvas API, WebGL, or WebGPU.
DOM
The DOM (Document Object Model) API represents HTML and XML documents as trees of nodes. You can use the API to inspect and modify the structure and content of a document.
Selection
The Selection API controls and modifies user text selections within the page.
<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.
<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.
inert
The inert HTML attribute marks an element and its descendants as non-interactive. Inert elements don't get focus or fire click events.
tabindex
The tabindex HTML attribute make an element focusable, and sets the element's relative ordering for sequential focus navigation.
<audio>
The <audio> element plays sound such as audio effects or music, optionally with controls provided by the browser.
<img>
The <img> element adds an image into the document.
<picture>
The <picture> element is used for art direction in responsive images, where a different image is displayed based on the <source> element.
<source>
The <source> element sets a media resource for the <picture>, <video>, and <audio> elements.
<video>
The <video> element plays videos or movies, optionally with controls provided by the browser.
Text tracks
The <track> element is used as a child of the media elements that lets you specify a timed text track to be displayed in parallel with the media element.
<ruby>
The <ruby> element produces small annotations that are rendered with its base text.
Import maps
A <script type="importmap"> HTML element provides an import map as a JSON string. An import map controls how the browser should resolve module specifiers when importing JavaScript modules.
JavaScript modules
JavaScript modules allow code to be organized into reusable units. Modules use import to load other modules and export to declare what is available to import from other modules. In HTML, modules are loaded with <script type="module">.
srcset and sizes
The srcset and sizes attributes for <img> elements set a list of possible sources for the image and a corresponding list of size conditions for choosing a source, to show a responsive image that fits the size of the display.
<a>
The <a> element creates a hyperlink to any resource that's accessible via a URL, such as web pages, files, email addresses, or locations within the same page.
accesskey
The accesskey global HTML attribute gives a hint for generating a keyboard shortcut for the current element. The attribute value must consist of a single printable character.
Change event
The change event for <input>, <select>, and <textarea> elements fires when the user modifies the element's value. Unlike the input event, the change event does not necessarily fire on every alteration to an element's value.
CSS object model
The CSS object model API reads, creates, and modifies CSS stylesheets and inline styles. Also known as CSSOM.
Dataset
The dataset API attaches and accesses custom data on elements, using either the dataset property of HTMLElement or attributes prefixed with data-.
download
The download attribute for <a> elements loads the target URL as a file to be saved, instead of navigating to it. An optional attribute value sets a default file name.
Drag and Drop
The Drag and Drop API lets users drag and drop elements and external files such as images onto web pages. Developers can customize which elements can become draggable, the type of feedback the draggable elements produce, and the droppable elements.
enterkeyhint
The enterkeyhint global HTML attribute sets the label for a virtual keyboard's Enter key. For example, enterkeyhint="search" may label the key with a magnifying glass icon.
Focus events
Focus events, such as focus and blur, fire when an element gets or loses focus.
ImageBitmapRenderingContext
The ImageBitmapRenderingContext API is the "bitmaprenderer" rendering context for the <canvas> element. It is commonly used to transfer frames from an OffscreenCanvas to a user-visible <canvas> element.
lang
The lang global HTML attribute defines the language of an element. It's used by assistive technology to correctly read the content, translation tools to select the origin language, and other applications.
Media playback quality
The getVideoPlaybackQuality() method of HTMLVideoElement returns metrics that can be used to determine the playback quality of a video, such as how many frames were dropped.
Mouse events
Mouse events, such as click, mousedown, or mousemove, fire when users interact with an input or pointing device such as a mouse, trackpad, or touchscreen.
spellcheck
The spellcheck global HTML attribute sets whether the browser may check an element for spelling errors.
style (attribute)
The style global HTML attribute applies inline CSS styling declarations to individual elements.
title (attribute)
The title global HTML attribute sets information about an element, such as a name or description. The value is typically shown as a tooltip that appears on mouse over. Since it's not often available to touch-only, keyboard-only, or assistive technology users, it's not a substitute for other text.
translate
The translate HTML attribute marks whether an element's text should be translated.
WebGL2
The WebGL2RenderingContext API is the "webgl2" rendering context for the <canvas> element. It represents a space for drawing two- and three-dimensional graphics and animations. It corresponds to OpenGL ES 3.0.
<link rel="modulepreload">
The rel="modulepreload" attribute for the <link> HTML element indicates that a module script should be fetched, parsed, and compiled preemptively, and stored for later execution.
<link rel="preconnect">
The rel="preconnect" attribute for the <link> HTML element is a hint to the browser that the page or user is likely to request resources from another origin, so the browser should preemptively start a connection to the href value's origin.
<link rel="preload">
The rel="preload" attribute for the <link> HTML element requests resources, such as images or style sheets, that the page needs soon, so the browser may prioritize them for loading before rendering begins.
<aside>
The <aside> element represents a portion of a document whose content is only indirectly related to the document's main content.
<header> and <footer>
The <header> and <footer> HTML elements represent content that precedes and follows the main page content, respectively.
<main>
The <main> element represents the dominant content of a document. It is commonly used together with <header> and <footer>.
<nav>
The <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents.
<section>
The <section> element is a generic standalone section of a document, which doesn't have a more specific semantic element to represent it.
Content Security Policy (CSP)
Content Security Policy (CSP) helps to mitigate certain security threats, including cross-site scripting (XSS) and clickjacking attacks. It consists of a set of directives from a website to a browser, which instruct the browser to restrict the things that the site is allowed to do.
Web authentication
The web authentication API allows you to create public key-based credentials and use them for authentication, such as when signing in. Also known as WebAuthn.
Referrer policy
The Referrer-Policy HTTP header and referrerpolicy HTML attributes control whether requests have the Referer header and what information the header contains.
Sandboxed iframes
The sandbox attribute for the <iframe> HTML element sets many security restrictions on the iframe, such as preventing form submissions or opening modal dialogs. Optional allow- values relax specific restrictions.
<b>
The <b> HTML element draws reader's attention to text, styling text as bold by default.
<base>
The <base> element sets the base URL (the URL that relative URLs are relative to) for all relative URLs in the document.
<bdi>
The <bdi> element isolates text that may have a different text direction from its surrounding text. This prevents the browser's bidirectional text algorithm from affecting or being affected by the direction of the surrounding text.
<bdo>
The <bdo> element overrides the directionality of text, so that the text within is rendered in a different direction than the surrounding text.
<body>
The <body> element represents the content of an HTML document.
<br>
The <br> element produces line breaks in text.
<cite>
The <cite> element represents the title of a quoted, referenced, or mentioned creative work, such as a film or book.
<code>
The <code> element displays its contents as a fragment of computer code.
<del>
The <del> element element represents a range of text that has been deleted from a document, styling text as strikethrough by default.
<dfn>
The <dfn> element marks a term to be defined, styling text as italic by default.
<div>
The <div> HTML element is the generic container for content.
<em>
The <em> HTML element emphasizes or stresses the content, styling text as italic by default.
<embed>
The <embed> element represents an external resource such as a PDF or SVG document. It was historically used for plugins such as Shockwave Flash.
<head>
The <head> element contains machine-readable information (metadata) about the document, such as the title, <script> and <style> elements, and <meta> elements.
<hgroup>
The <hgroup> element represents a heading and related content.
<hr>
The <hr> element represents a thematic break between paragraphs, often shown as a horizontal rule.
<html>
The <html> element represents the top-level of an HTML document and is referred to as the root element.
<i>
The <i> HTML element identifies idiomatic content, styling text as italic by default.
<ins>
The <ins> element element represents a range of text that has been inserted into a document, styling text as underlined by default.
<kbd>
The <kbd> element represents textual user input, such as keyboard or voice input, styling text in monospaced type by default.
<link>
The <link> element creates a relationship between the current document and an external resource, such as a stylesheet or favicon.
<mark>
The <mark> element represents text which is marked or highlighted for reference or notation purposes.
<menu>
The <menu> element represents an unordered list of action items (<li>), such as a toolbar. It is a semantic alternative to the <ul> element.
<meta>
The <meta> element represents metadata about the page used by the browser or search engines, including description, keywords, and character sets.
<object>
The <object> element represents an external resource such as a PDF or SVG document. It was historically used for plugins such as Shockwave Flash.
<q>
The <q> element represents a short inline quotation.
<s>
The <s> HTML element indicates text that is no longer relevant or accurate, styling text as strikethrough by default.
<samp>
The <samp> element represents a sample or quoted output from a computer program. Styled in a monospace font by default.
<script> and <noscript>
The <script> element contains or loads data or executable code. This is typically used to load JavaScript code. The <noscript> element represents alternative content to show when scripting is not allowed.
<slot>
The <slot> HTML element is a placeholder inside a web component where consumers of the component can insert their own markup.
<small>
The <small> element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. Styled in a reduced font size by default.
<span>
The <span> HTML element is the generic inline container for content.
<strong>
The <strong> HTML element brings attention to the content, styling text as bold by default.
<style>
The <style> element embeds an inline CSS stylesheet in a document.
<sub> and <sup>
The <sub> and <sup> elements sets inline text to be displayed as subscript or superscript for solely typographical reasons.
<template>
The <template> HTML element holds HTML fragments which you can clone and insert into the document using JavaScript.
<time>
The <time> HTML element represents a time, such as a calendar date, clock time, or duration. It may include the datetime attribute to translate dates into machine-readable format.
<title>
The <title> element sets the title of the document and exposes it to users via the UI of the browser or app they're using and through assistive technology.
<u>
The <u> HTML element makes non-textual annotations, styling text as underlined by default.
<var>
The <var> element represents the name of a variable in a mathematical expression or a programming context.
<wbr>
The <wbr> HTML element represents a word break opportunity, to explicitly mark a place within a word where a line might be broken.
Image maps
The <area> and <map> elements define a clickable area on an image.
<abbr>
The <abbr> HTML element represents an abbreviation or acronym.
<blockquote>
The <blockquote> element represents an extended quotation, styling contents as an indented block by default.
<data>
The <data> element links a given piece of content with a machine-readable translation.
<p>
The <p> element represents a paragraph of text.
<pre>
The <pre> element represents a block element of preformatted text that is presented exactly as written, including all white space.
Form-associated custom elements
Custom elements may act like built-in form elements, via the the attachInternals() method of HTMLElement and the ElementInternals API.
Imperative slot assignment
The assign() method for <slot> elements assigns nodes to the slot, as an alternative to using the slot and name HTML attributes. The nodes must be children of a shadow host and the shadow root must be created with the slotAssignment set to "manual". Also known as manual slot assignment.
Available with conditions
Newly availablewillReadFrequently
The optional willReadFrequently parameter of a canvas's getContext() method permits the browser to optimize for frequent getImageData() calls by avoiding hardware acceleration. Also known as multiple readback.
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.
Screen wake lock
The navigator.wakeLock.request("screen") API prevents the device's screen from dimming or being turned off.
<input type="file" webkitdirectory>
The <input type="file" webkitdirectory> HTML element shows a file picker from which users can choose a folder to upload with the form.
Invoker commands
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.
preservesPitch
The preservesPitch property for <audio> or <video> adjusts the pitch of audio to sound more natural when the playback rate is faster or slower than the default.
requestVideoFrameCallback()
The requestVideoFrameCallback() method for <video> schedules a function that runs with the next video frame. It is similar to requestAnimationFrame(), but for video.
Declarative shadow DOM
The shadowrootmode attribute on <template> creates a shadow root without the use of JavaScript. It is a declarative alternative to the attachShadow() method.
Popover
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.
Preloading responsive images
The imagesrcset and imagesizes attributes with the rel="preload" attribute for the <link> HTML element starts fetching responsive images before they're found in the body of the document.
contenteditable="plaintext-only"
The contenteditable="plaintext-only" global HTML attribute allows the user to edit the content of an element, but prevents rich-text formatting.
Scroll to text fragment
Text fragments are URL fragments on the form #:~:text=snippet and link to a snippet of text within a page. The browser may scroll, highlight, or otherwise bring that text to the reader's attention.
<link rel="dns-prefetch">
The rel="dns-prefetch" attribute for the <link> HTML element is a hint to the browser that the page or user is likely to request resources from another domain, so the browser should preemptively resolve DNS for the href value's domain.
Fetch priority
The fetch() priority option and the fetchpriority HTML attribute give hints to the browser about which requests to do before other requests of the same type.
Storage access
The document.requestStorageAccess() method allows content in iframes to request storing and reading cookies and other site data, while the document.hasStorageAccess() method checks if such access is granted.
Trusted types
Trusted types allow you to lock down insecure parts of the DOM API and prevent client-side cross-site scripting (XSS) attacks.
<search>
The <search> HTML element is a container that represents the parts of the web page with search functionality.
dialog.requestClose()
The requestClose() method of a <dialog> HTML element closes the dialog, firing a cancel event first, which listeners can use to prevent the dialog from closing. This differs from the close() method, which only fires the non-cancelable close event.
Mutually exclusive <details> elements
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.