Web Platform Design Principles

W3C Group Note,

More details about this document
This version:
https://www.w3.org/TR/2025/NOTE-design-principles-20250304/
Latest published version:
https://www.w3.org/TR/design-principles/
Editor's Draft:
https://w3ctag.github.io/design-principles/
Previous Versions:
History:
https://www.w3.org/standards/history/design-principles/
Feedback:
GitHub
Editors:
Martin Thomson (Mozilla)
Jeffrey Yasskin (Google)
Former Editors:
Lea Verou (Invited Expert)
Sangwhan Moon (Google)
Domenic Denicola (Google)
(Microsoft)
By:
Members of the TAG, past and present
Participate:
GitHub w3ctag/design-principles (file an issue; open issues)

Abstract

This document contains a set of design principles to be used when designing web platform technologies. These principles have been collected during the Technical Architecture Group’s discussions in reviewing developing specifications, and build upon the Ethical Web Principles [ETHICAL-WEB]. We encourage specification designers to read this document and use it as a resource when making design decisions.

Status of this document

This section describes the status of this document at the time of its publication. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at https://www.w3.org/TR/.

This document was published by the Technical Architecture Group as a Group Note using the Note track. Group Notes are not endorsed by W3C nor its Members.

Feedback and comments on this document are welcome. Please file an issue in this document’s GitHub repository.

The W3C Patent Policy does not carry any licensing requirements or commitments on this document.

This document is governed by the 03 November 2023 W3C Process Document.

1. Principles behind design of Web APIs

The Design Principles are directly informed by the ethical framework set out in the Ethical Web Principles [ETHICAL-WEB]. These principles provide concrete practical advice in response to the higher level ethical responsibilities that come with developing the web platform.

1.1. Put user needs first (Priority of Constituencies)

If a trade-off needs to be made, always put user needs above all.

Similarly, when beginning to design an API, be sure to understand and document the user need that the API aims to address.

The internet is for end users: any change made to the web platform has the potential to affect vast numbers of people, and may have a profound impact on any person’s life. [RFC8890]

User needs come before the needs of web page authors, which come before the needs of user agent implementors, which come before the needs of specification writers, which come before theoretical purity.

Like all principles, this isn’t absolute. Ease of authoring affects how content reaches users. User agents have to prioritize finite engineering resources, which affects how features reach authors. Specification writers also have finite resources, and theoretical concerns reflect underlying needs of all of these groups.

See also:

1.2. It should be safe to visit a web page

When adding new features, design them to preserve the user expectation that visiting a web page is generally safe.

The Web is named for its hyperlinked structure. In order for the web to remain vibrant, users need to be able to expect that merely visiting any given link won’t have implications for the security of their computer, or for any essential aspects of their privacy.

For example, an API that allows any website to detect the use of assistive technologies may make users of these technologies feel unsafe visiting unknown web pages, since any web page may detect this private information.

If users have a realistic expectation of safety, they can make informed decisions between Web-based technologies and other technologies. For example, users may choose to use a web-based food ordering page, rather than installing an app, since installing a native app is riskier than visiting a web page.

To work towards making sure the reality of safety on the web matches users' expectations, we can take complementary approaches when adding new features:

A new feature which introduces safety risks may still improve user safety overall, if it allows users to perform a task more safely on a web page than it would be for them to install a native app to do the same thing. However, this benefit needs to be weighed against the common goal of users having a reasonable expectation of safety on web pages.

See also:

1.3. Trusted user interface should be trustworthy

Consider whether new features impact trusted user interfaces.

Users depend on trusted user interfaces such as the address bar, security indicators and permission prompts, to understand who they are interacting with and how. These trusted user interfaces must be able to be designed in a way that enables users to trust and verify that the information they provide is genuine, and hasn’t been spoofed or hijacked by the website.

If a new feature allows untrusted user interfaces to resemble trusted user interfaces, this makes it more difficult for users to understand what information is trustworthy.

For example, JavaScript alert() allows a page to show a modal dialog which looks like part of the browser. This is often used to attempt to trick users into visiting scam websites. If this feature was proposed today, it would probably not proceed.

In the context of fulfilling a user need, a web page may want to make use of a feature that has the potential to cause harm. Features that have this potential for harm should be designed such that people can give meaningful consent for that feature to be used, and that they can refuse consent effectively.

In order to give meaningful consent, the user must:

If a feature is powerful enough to require user consent, but it’s impossible to explain to a typical user what they are consenting to, that’s a signal that you may need to reconsider the design of the feature.

If a permission prompt is shown, and the user doesn’t grant permission, the Web page should not be able to do anything that the user believes they have refused consent for.

By asking for consent, we can inform the user of what capabilities the web page does or doesn’t have, reinforcing their confidence that the web is safe. However, the user benefit of a new feature must justify the additional burden on users to decide whether to grant permission for each feature whenever it’s requested by a Web page.

In your specification, the request permission to use and prompt the user to choose algorithms from [permissions] are good ways to ask for consent.

Refusal is most effective if the site cannot distinguish refusal from other, common situations. This can make it more difficult for a site to pressure users to grant consent.

For example, the Geolocation API grants access to a user’s location. This can help users in some contexts, like a mapping application, but may be dangerous to some users in other contexts - especially if used without the user’s knowledge. So that the user may decide whether their location may be used by a Web page, a permission prompt should be shown to the user asking whether to grant location access. If the user refuses permission, no location information is available to the Web page.

See also:

1.5. Use identity appropriately in context

Give people control over the identifying information about themselves they are presenting in different contexts on the web, and be transparent about it.

"Identity" is a complex concept that can be understood in many different ways. It can refer to how someone presents or sees themselves, how they relate to other people, groups, or institutions, and can determine how they behave or how they are treated by others. In web architecture, "identity" is often used as a shortcut to refer to identifiers, and the information attached to them.

Features that use or depend on identifiers and the attachment of data about a person to that identifier carry privacy risks which often reach beyond a single API or system. This includes data that has been passively generated (for example, about their behaviour on the web) as well as that which has been actively collected (for example, they have filled in a form).

For such features, you should understand the context in which it will be used, including how it will be used alongside other features of the web. Make sure the user can give appropriate consent. Design APIs to collect the smallest amount of data necessary. Use short-lived, temporary identifiers unless a persistent identifier is absolutely necessary.

1.6. Support the full range of devices and platforms (Media Independence)

As much as possible, ensure that features on the web work across different input and output devices, screen sizes, interaction modes, platforms, and media.

One of the main values of the Web is that it’s extremely flexible: a Web page may be viewed on virtually any consumer computing device at a very wide range of screen sizes, may be used to generate printed media, and may be interacted with in a large number of different ways. New features should match the existing flexibility of the web platform.

This doesn’t imply that features which don’t work in every possible context should be excluded. For example, hyperlinks can’t be visited when printed on paper, and the click event doesn’t translate perfectly to touch input devices where positioning and clicking the pointer occur in the same gesture (a "tap").

These features still work across a wide variety of contexts, and can be adapted to devices that don’t support their original intent - for example, a tap on a mobile device will fire a click event as a fallback.

Features should also be designed so that the easiest way to use them maintains flexibility.

The 'display: block', 'display: flex', and 'display: grid' layout models in CSS all default to placing content within the available space and without overlap, so that it works across screen sizes, and allows users to choose their own font and font size without causing text to overflow.

Sometimes features aren’t yet available on some implementations or platforms despite working on others. In these cases, features should be designed such that it is possible for code to gracefully fail or be polyfilled. See § 2.6 New features should be detectable.

1.7. Add new capabilities with care

Add new capabilities to the web with consideration of existing functionality and content.

The Web includes many extension points that allow for additions; see for example HTML § 1.7.3 Extensibility.

Before adding items, consider integration with existing, similar capabilities. If this leads to a preferred design approach that cannot be implemented by only adding items, it might still be possible; see § 1.8 Remove or change capabilities only once you understand existing usage.

Do not assume that a change or removal is impossible without first checking.

1.8. Remove or change capabilities only once you understand existing usage

Prioritize compatibility with existing content when removing or changing functionality.

Once a significant amount of content has come to depend on a particular behavior, removing or changing that behavior is discouraged. Removing or changing features and capabilities is possible, but it first requires that the nature and scope of the impact on existing content is well understood. This might require research into how features are used by existing content.

The obligation to understand existing usage also applies to any features that content relies upon. This includes vendor-proprietary features and behavior that might be considered implementation bugs. Web features are not solely defined in specifications; they are also defined by how content uses those features.

1.9. Leave the web better than you found it

As you add new capabilities to the web platform, do so in a way that improves the overall platform, for example its security, privacy or accessibility characteristics.

The existence of a defect in one part of the platform must not be used to excuse an addition or extension to the defect, which would further decrease the overall platform quality. Where possible, build new web capabilities that improve the overall platform quality by mitigating existing defects. Do not degrade existing capabilities without good reason.

Parts of the web platform evolve independently. Issues that are present with a certain web technology now may be fixed in a subsequent iteration. Duplicating these issues makes fixing them more difficult. By adhering to this principle we can make sure overall platform quality improves over time.

1.10. Minimize user data

Design features to work with the minimum amount of data necessary to carry out their users' goals.

Data minimization limits the risks of data being inappropriately disclosed or misused.

Design Web APIs to make it easier for sites to request, collect, and/or transmit a small amount of data, or more granular or specific data, than it is to work with more generic or bulk data. APIs should also provide granularity and user controls, in particular over personal data, that is communicated to sites. When additional functionality requires additional data, APIs can enable this subject to user consent (e.g., a permission prompt or user activation).

A Font Enumeration API API was once proposed, but the tradeoff of user data exposed was not justified by the use cases. Instead, an alternative solution was proposed, which only exposed the font the user actually selected.

2. API Design Across Languages

2.1. Prefer simple solutions

Look hard for simple solutions to the user needs you intend to address.

Simple solutions are generally better than complex solutions, although they may be harder to find. Simpler features are easier for user agents to implement and test, more likely to be interoperable, and easier for authors to understand. It is especially important to design your feature so that the most common use cases are easy to accomplish.

Make sure that your user needs are well-defined. This allows you to avoid scope creep, and make sure that your API does actually meet the needs of all users. Of course, complex or rare use cases are also worth solving, though their solutions may be more complicated to use. As Alan Kay said, "simple things should be simple, complex things should be possible."

Do note however that while common cases are often simple, commonality and complexity are not always correlated.

Sanitizing HTML to prevent XSS attacks is a complex process that requires extensive security knowledge, however the Sanitizer API provides a shortcut for this common use case. It also permits simpler types of filtering, but with more configuration.

See also:

2.2. Consider tradeoffs between high level and low level APIs

High-level APIs allow user agents more ability to intervene in various ways on behalf of the user, such as to ensure accessibility, privacy, or usability.

A font picker (high level API) was recommended by the TAG over a Font Enumeration API (low level API) as it addresses the bulk of use cases, while preserving user privacy, as it is free from the fingerprinting concerns that accompany a general Font Enumeration API. A native font picker also comes with accessibility built-in, and provides consistency for end users.

Low-level APIs afford authors room for experimentation so that high level APIs can organically emerge from usage patterns over time. They also provide an escape hatch when the higher-level API is not adequate for the use case at hand.

Lower level building blocks cannot always be exposed as Web APIs. A few possible reasons for this are to preserve the user’s security and privacy, or to avoid tying Web APIs to specific hardware implementations. However, high level APIs should be designed in terms of building blocks over lower level APIs whenever possible. This may guide decisions on how high level the API needs to be.

A well-layered solution should ensure continuity of the ease-of-use vs power tradeoff curve and avoid sharp cliffs where a small amount of incremental use case complexity results in a large increase of code complexity.

2.3. Name things thoughtfully

Name APIs with care. Naming APIs well makes it much easier for authors to use them correctly.

See the more detailed Naming principles section for specific guidance on naming.

2.4. Be consistent

It is good practice to consider precedent in the design of your API and to try to be consistent with it.

There is often a tension between API ergonomics and consistency, when existing precedent is of poor usability. In some cases it makes sense to break consistency to improve usability, but the improvement should be very significant to justify this.

Since the web platform has gradually evolved over time, there are often multiple conflicting precedents which are mutually exclusive. You can weigh which precedent to follow by taking into account prevalence (all else being equal, follow the more popular precedent), API ergonomics (all else being equal, follow the more usable precedent), and API age (all else being equal, follow the newer precedent).

There is often a tension between internal and external consistency. Internal consistency is consistency with the rest of the system, whereas external consistency is consistency with the rest of the world. In the web platform, that might materialize in three layers: consistency within the technology the API belongs to (e.g. CSS), consistency with the rest of the web platform, and in some cases external precedent, when the API relates to a particular specialized outside domain. In those cases, it is useful to consider what the majority of users will be. Since for most APIs the target user is someone who is familiar with the technology they are defined in, err on the side of favoring consistency with that.

One example is CIE L*a*b* colors: It would be more consistent with the rest of CSS to use percentages for L (0%-100%), but more consistent with the rest of Color Science to use a unitless number (0-100). There was a lot of heated debate, which resolved in favor of percentages, i.e. consistency within CSS.

There is also a separate section on naming consistency.

2.5. Follow guidance from feature specifications

When using a feature, follow guidance in the specification for that feature.

Specifications for features that will be used by other specifications should include guidance for using those features. This ensures that the feature is used correctly and consistently throughout the platform.

An incomplete list of such guidance follows:

Consult with the relevant community when using their specification. This informs that community about new usage and creates opportunities for improvements to both the using and used specifications.

2.6. New features should be detectable

Provide a way for authors to programmatically detect whether your feature is available, so that web content may gracefully handle the feature not being present.

An existing feature may not be available on a page for a number of reasons. Two of the more common reasons are because it hasn’t been implemented yet, or because it’s only available in secure contexts.

Authors shouldn’t need to write different code to handle each scenario. That way, even if an author only knows or cares about one scenario, the code will handle all of them.

When a feature is available but isn’t feasible to use because a required device isn’t present, it’s better to expose that the feature is available and have a separate way to detect that the device isn’t. This allows authors to handle a device not being available differently from the feature not being available, for example by suggesting the user connect or enable the device.

See § 9.2 Use care when exposing APIs for selecting or enumerating devices.

Authors should always be able to detect a feature from JavaScript, and in some cases the feature should also be detectable in the language where it’s used (such as @supports in CSS).

In some cases, it may not be appropriate to allow feature detection. Whether the feature should be detectable or not should be based on the user need for the feature. If there is a user need or design principle which would fail if feature detection were available for the feature, then you should not support feature detection.

Detecting the availability of a feature does not imply detecting whether consent to use the feature has been granted. Generally, detecting whether the feature is implemented can be done separately from determining whether use of the feature has been authorized. In some cases, it might be necessary to disable feature detection in order to enable denying requests to use the feature.

Also, if a feature is generally not exposed to developers, it is not appropriate to support feature detection. For example, private browsing mode is a concept which is recognised in web specifications, but not exposed to authors. For private browsing mode to support the user’s needs, it must not be feature detected.

See also:

2.7. Design textual formats for humans

Design textual formats that can be easily produced and consumed by people. Textual formats also improve transparency.

Favor readability over compactness. File size can be optimized by tooling, and tends to become a lower priority over time. When file size is a significantly higher priority, perhaps a textual format is not appropriate.

SVG path syntax was designed to be compact, with single-letter commands and unlabeled series of coordinates after them. At the time, file size was a primary concern, but while the importance of size efficiency has declined over time, the cost to human readability has remained the same.

People who are presented with a textual format should be able to use a text editor to easily produce or modify content. People who edit text will introduce a range of errors, but could struggle to identify and fix those errors.

People expect some amount of flexibility in terms of how their edits are processed. Clearly defining syntactic flexibility—​such as in whitespace, quoting, or delimiters—​could ensure that content is both easy to edit and produces consistent results.

The JSON format is an example of a format that appears to be flexible, but it lacks many of these basic usability amenities. In JSON there is: no commenting capability, objects and arrays cannot have trailing commas, and quotes are mandatory for object keys. This makes JSON prone to syntactic errors as a result of manual edits.

Containing the scope of a format that is affected by a syntax error could improve robustness and human usability. This requires that specifications fully define processing and error handling so that all inputs result in consistent outcomes.

Typos in CSS properties only cause that property to be ignored. Errors in properties rarely cause an entire rule to be lost.

If your format is intended to be used only by machines, a binary format is likely to be more efficient, in addition to discouraging people from authoring or editing content directly.

2.8. Consider limiting new features to secure contexts

Always limit your feature to secure contexts if it would pose a risk to the user without the authentication, integrity, or confidentiality that’s present only in secure contexts.

One example of a feature that should be limited to secure contexts is Geolocation, since it would be a risk to users' privacy to transmit their location in an insecure way.

For other features, TAG members past and present haven’t reached consensus on general advice. Some believe that all new features (other than features which are additions to existing features) should be limited to secure contexts. This would help encourage the use of HTTPS, helping users be more secure in general.

Others believe that features should only be limited to secure contexts if they have a known security or privacy impact. This lowers the barrier to entry for creating web pages that take advantage of new features which don’t impact user security or privacy.

Specification authors can limit most features defined in Web IDL [WEBIDL], to secure contexts by using the [SecureContext] extended attribute on interfaces, namespaces, or their members (such as methods and attributes).

However, for some types of API (e.g., dispatching an event), limitation to secure contexts should just be defined in normative prose in the specification. If this is the case, consider whether there might be scope for adding a similar mechanism to [SecureContext] to make this process easier for future API developers.

As described in § 2.6 New features should be detectable, you should provide a way to programmatically detect whether a feature is available, including cases where the feature is unavailable because the context isn’t secure.

However, if, for some reason there is no way for code to gracefully handle the feature not being present, limiting the feature to secure contexts might cause problems for code (such as libraries) that may be used in either secure or non-secure contexts.

2.9. Don’t reveal that private browsing mode is engaged

Make sure that your feature doesn’t give authors a way to detect private browsing mode.

Some people use private browsing mode to protect their own personal safety. Because of this, the fact that someone is using private browsing mode may be sensitive information about them. This information may harm people if it is revealed to a web site controlled by others who have power over them (such as employers, parents, partners, or state actors).

Given such dangers, websites should not be able to detect that private browsing mode is engaged.

User Agents which support IndexedDB should not disable it in private browsing mode, because that would reveal that private browsing mode is engaged
The Payment Request API’s show() method, when called, allows User Agents to act as if the user had immediately aborted the payment request.

This enables User Agents to automatically abort payment requests in private browsing mode (thus protecting sensitive information such as the user’s shipping or billing address) without revealing that private browsing mode is engaged.

See also:

2.10. Consider how your API should behave in private browsing mode

If necessary, specify how your API should behave differently in private browsing mode.

For example, if your API would reveal information that would allow someone to correlate a single user’s activity both in and out of private browsing mode, consider possible mitigations such as introducing noise, or using permission prompts to give the user extra information to help them meaningfully consent to this tracking (see § 1.4 Ask users for meaningful consent).

Private browsing modes enable users to browse the web without leaving any trace of their private browsing on their device. Therefore, APIs which provide client-side storage should not persist data stored while private browsing mode is engaged after it’s disengaged. This can and should be done without revealing any detectable API differences to the site.

User Agents which support localStorage should not persist storage area changes made while private browsing mode is engaged.

If the User Agent has two simultaneous sessions with a site, one in private browsing mode and one not, storage area changes made in the private browsing mode session should not be revealed to the other browsing session, and vice versa. (The storage event should not be fired at the other session’s window object.)

See also:

2.11. Don’t reveal that assistive technologies are being used

Make sure that your API doesn’t provide a way for authors to detect that a user is using assistive technology without the user’s consent.

The web platform must be accessible to people with disabilities. If a site can detect that a user is using an assistive technology, that site can deny or restrict the user’s access to the services it provides.

People who make use of assistive technologies are often vulnerable members of society; their use of assistive technologies is sensitive information about them. If an API provides access to this information without the user’s consent, this sensitive information may be revealed to others (including state actors) who may wish them harm.

Sometimes people propose features which aim to improve the user experience for users of assistive technology, but which would reveal the user’s use of assistive technology as a side effect. While these are well intentioned, they violate § 1.2 It should be safe to visit a web page, so alternative solutions must be found.

The Accessibility Object Model (AOM) used to define a set of events which, when fired, revealed the use of assistive technology.

AOM has since removed these events and replaced them with synthetic DOM events which don’t reveal the use of assistive technology.

See also:

2.12. Require user activation for powerful APIs

Some powerful APIs can produce intrusive UI (eg. auto-playing audio), expose user data (eg. interacting with the clipboard), perform a background activity without an obvious indicator to the user (eg. accessing local storage), or prompt the user to interact with trusted UI (eg. permission prompts, device hardware features). These APIs should be designed to require some indication of user intention (such as user activation) in order to function. This indicates that the user is intentionally interacting with the web page in question.

User activation is defined in detail in the HTML standard. You should think about the effect your API has on the user experience, as well as any risks presented to the user, when deciding whether user activation needs to only occur once overall (sticky), periodically (transient) or once per API call (transient consuming).

Note that while user activation is in many cases necessary, it is not always sufficient to protect users from invasive behaviours, and seeking meaningful consent is also important.

2.13. Support non-fully active BFCached documents

Specify how your feature behaves in non-fully active BFCached (Back/forward cached) documents if possible.

If your feature does anything that falls into the following categories:

Specify how your feature works with non-fully active BFCached documents, following the guidelines in the Supporting BFCached Documents guide.

Note: It is possible for a document to become non-fully active for other reasons not related to BFcaching, such as when the iframe holding the document gets detached. This guidance only focuses on the case where BFCache is involved, and not other cases that might cause a document to become non-fully active.

2.14. Prioritize usability over compatibility with third-party tools

Design new features with usability as the primary goal, and compatibility with third-party tooling as a secondary goal.

The web platform benefits from a wide ecosystem of tooling to facilitate easier and faster development. A lot of the time, the syntax of an upcoming web platform feature may conflict with that of a third-party tool causing breakage. This is especially common as third-party tools are often used to prototype new web platform features.

In general, web platform features last a lot longer than most third-party tools, and thus giving them the optimal syntax and functionality should be of high priority.

In some cases, the conflict will introduce problems across a large number of web sites, necessitating the feature’s syntax to be redesigned to avoid clashes.

Array.prototype.contains() had to be renamed to Array.prototype.includes() to avoid clashes with the identically named but incompatible method from PrototypeJS, a library that was in use in millions of websites.

However, these cases should be exceptions.

When deciding whether to break third party tools with new syntax, there are several factors to consider, such as severity of the breakage, popularity of the third party tool, and many more.

Possibly the most important factor is how severely would the usability of the web platform feature be compromised if its syntax was changed to avoid breaking the third party tool? If several alternatives of similar usability are being considered, it is usually preferable to prioritize the ones that inconvenience third party tools the least.

When the CSS WG was designing CSS Grid Layout, square brackets were chosen instead of parentheses for naming grid tracks to avoid breaking Sass, a popular preprocessor.

However, if avoiding breaking the third party tool would lead to a significant negative impact on of the feature’s usability, that is rarely an acceptable tradeoff, unless it causes significant breakage of live websites.

Languages should also provide mechanisms for extensibility that authors can use to extend the language without breaking future native functionality, to reduce such dilemmas in the future.

2.15. Build complex types by composing simpler types

Define subtypes that can always be used in place of a supertype. Avoid interfaces that use inheritance unless everything that can be said about an instance of the parent always applies to the child as well.

With inheritance, a subtype creates a type of item that can stand in for its supertype. A subtype needs to provide the same attributes and methods as its supertype. The subtype also needs to maintain consistent behavior. If the subtype changes the way that an item works, something that handles the supertype might not work properly.

In the theory of type systems, this is known as the Liskov Substitution Principle.

The Event type is a super-type of KeyboardEvent and PointerEvent. Events always have the same basic set of properties and actions that apply, like whether the event bubbles. The subtypes add new properties and actions, but instances of those subtypes still act in every way as an Event.

A simpler approach is often to avoid inheritance and reuse existing capabilities by composition. New items can define properties that hold any existing components that are needed.

Form-associated custom elements allow custom elements to interact with form submission. Specializing HTMLInputElement would be difficult, because an input element is quite complex and a specialization of HTMLInputElement would need to maintain that complexity. Custom elements can attach (i.e., compose) items that are necessary to interact with a form without having to deal with the complications of HTMLInputElement.
.

3. HTML

This section details design principles for features which are exposed via HTML.

3.1. Re-use HTML attribute names (only) for similar functionality

If you are adding a feature that is specified through an HTML attribute, check if there is an existing attribute name on another element that specifies similar functionality. Re-using an existing HTML attribute name means authors can utilize existing knowledge, maintains consistency across the language, and keeps its vocabulary small.

The same attribute name, multiple, is used on both select to allow selection of multiple values, as well as on input to allow entry of multiple values.
The open attribute was introduced on the details element, and then re-used by dialog.

If you do re-use an existing HTML attribute, try to keep its syntax as close as possible to the syntax of the existing attribute.

The for attribute was introduced on the label element, for specifying which form element it should be associated with. It was later re-used by output, for specifying which elements contributed input values to or otherwise affected the calculation. The syntax of the latter is broader: it accepts a space-separated list of ids, whereas the former only accepts one id. However, they both still conform to the same syntax, whereas e.g. if one of them accepted a list of ids, and the other one a selector, that would be an antipattern.

The inverse also applies: do not re-use an existing HTML attribute name if the functionality you are adding is not similar to that of the existing attribute.

The type attribute is used on the input and button elements to further specialize the element type, whereas on every other element (e.g. link, script, style) it specifies MIME type. This is an antipattern; one of these groups of attributes should have had a different name.

3.2. Use space-separated attributes for short lists of values, separate elements for longer lists

When specifying metadata about an element that can be a list of values, common practice is to use a space-separated list and expose it as a DOMTokenList.

The class attribute on elements takes a space-separated list of class names. classList is a DOMTokenList that allows authors to add and remove class names.

The sandbox attribute takes a space-separated list of sandbox flags. iframe.sandbox is a DOMTokenList that allows authors to add and remove sandbox flags.

Consistency with other parts of the Web Platform is important, even if this means using another character to separate values.

The accept attribute is a comma-separated list of values, because it needs to match the syntax of the `Accept` HTTP header.

Regardless of syntax, attributes should only be used for short lists of values. For longer lists, embedding the entire list in an attribute is discouraged. Instead, current practice is to use separate elements to represent the list items (and any metadata about them). These elements could either be children of the element in question, or linked through an attribute.

The list of values for the select element is provided as a series of option element children. However, when providing a list of recommended values for an input element, a separate element is used (datalist), linked through a list attribute.

The list of media sources for a video or audio element is provided as a series of source element children.

In rare instances, other tradeoffs are necessary.

The srcset attribute allows for a comma-separated list of image candidate strings. This syntax was chosen over a list of child elements to avoid verbosity and because the img element is an empty element that does not permit child elements. A space-separated syntax would not have been possible, as each list item includes multiple values.

3.3. Do not pause the HTML parser

Ensure that your design does not require HTML parser to pause to handle external resources.

As a page parses, the browser discovers assets that the page needs, and figures out a priority in which they should be loaded in parallel. Such parsing can be disrupted by a resource which blocks the discovery of subsequent resources. At worst, it means the browser downloads items in series rather than parallel. At best, it means the browser queues downloads based on speculative parsing, which may turn out to be incorrect.

Features that block the parser generally do so because they want to feed additional content into the parser before subsequent content. This is the case of legacy

Index

Terms defined by this specification

Terms defined by reference

References

Normative References

[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. URL: https://drafts.csswg.org/css-cascade-5/
[CSS-CONDITIONAL-3]
Chris Lilley; David Baron; Elika Etemad. CSS Conditional Rules Module Level 3. URL: https://drafts.csswg.org/css-conditional-3/
[DOM]
Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
[ECMASCRIPT]
ECMAScript Language Specification. URL: https://tc39.es/ecma262/multipage/
[ENCODING]
Anne van Kesteren. Encoding Standard. Living Standard. URL: https://encoding.spec.whatwg.org/
[FETCH]
Anne van Kesteren. Fetch Standard. Living Standard. URL: https://fetch.spec.whatwg.org/
[FINGERPRINTING-GUIDANCE]
Nick Doty. Mitigating Browser Fingerprinting in Web Specifications. URL: https://w3c.github.io/fingerprinting-guidance/
[HIGHRES-TIME]
Yoav Weiss. High Resolution Time. URL: https://w3c.github.io/hr-time/
[HTML]
Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[I18N-GLOSSARY]
Richard Ishida; Addison Phillips. Internationalization Glossary. URL: https://w3c.github.io/i18n-glossary/
[IndexedDB-3]
Joshua Bell. Indexed Database API 3.0. URL: https://w3c.github.io/IndexedDB/
[INFRA]
Anne van Kesteren; Domenic Denicola. Infra Standard. Living Standard. URL: https://infra.spec.whatwg.org/
[MEDIAQUERIES-5]
Dean Jackson; et al. Media Queries Level 5. URL: https://drafts.csswg.org/mediaqueries-5/
[PAYMENT-REQUEST]
Marcos Caceres; Rouslan Solomakhin; Ian Jacobs. Payment Request API. URL: https://w3c.github.io/payment-request/
[PERMISSIONS]
Marcos Caceres; Mike Taylor. Permissions. URL: https://w3c.github.io/permissions/
[PRIVACY-PRINCIPLES]
Robin Berjon; Jeffrey Yasskin. Privacy Principles. URL: https://w3ctag.github.io/privacy-principles/
[REQUESTIDLECALLBACK]
Scott Haseley. requestIdleCallback(). URL: https://w3c.github.io/requestidlecallback/
[RFC9205]
M. Nottingham. Building Protocols with HTTP. June 2022. Best Current Practice. URL: https://httpwg.org/specs/rfc9205.html
[SERVICE-WORKERS]
Jake Archibald; Marijn Kruisselbrink. Service Workers. URL: https://w3c.github.io/ServiceWorker/
[URL]
Anne van Kesteren. URL Standard. Living Standard. URL: https://url.spec.whatwg.org/
[WEB-ANIMATIONS-2]
Brian Birtles; Robert Flack. Web Animations Level 2. URL: https://drafts.csswg.org/web-animations-2/
[WEBIDL]
Edgar Chen; Timothy Gu. Web IDL Standard. Living Standard. URL: https://webidl.spec.whatwg.org/
[XHR]
Anne van Kesteren. XMLHttpRequest Standard. Living Standard. URL: https://xhr.spec.whatwg.org/

Informative References

[APPMANIFEST]
Marcos Caceres; et al. Web Application Manifest. URL: https://w3c.github.io/manifest/
[CONSOLE]
Dominic Farolino; Robert Kowalski; Terin Stock. Console Standard. Living Standard. URL: https://console.spec.whatwg.org/
[CREDENTIAL-MANAGEMENT-1]
Nina Satragno; Marcos Caceres. Credential Management Level 1. URL: https://w3c.github.io/webappsec-credential-management/
[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. URL: https://drafts.csswg.org/css-backgrounds/
[CSS-FONTS-4]
Chris Lilley. CSS Fonts Module Level 4. URL: https://drafts.csswg.org/css-fonts-4/
[CSS-FONTS-5]
Chris Lilley. CSS Fonts Module Level 5. URL: https://drafts.csswg.org/css-fonts-5/
[CSS-GRID-1]
Tab Atkins Jr.; et al. CSS Grid Layout Module Level 1. URL: https://drafts.csswg.org/css-grid/
[CSS-INLINE-3]
Elika Etemad. CSS Inline Layout Module Level 3. URL: https://drafts.csswg.org/css-inline-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. URL: https://drafts.csswg.org/css-values-4/
[CSS2]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. URL: https://drafts.csswg.org/css2/
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). URL: https://drafts.csswg.org/cssom/
[CSSOM-VIEW-1]
Simon Pieters. CSSOM View Module. URL: https://drafts.csswg.org/cssom-view/
[ENCRYPTED-MEDIA]
Joey Parrish; Greg Freedman. Encrypted Media Extensions. URL: https://w3c.github.io/encrypted-media/
[ETHICAL-WEB]
Daniel Appelquist; Hadley Beeman. W3C TAG Ethical Web Principles. 27 October 2020. TAG Finding. URL: https://www.w3.org/2001/tag/doc/ethical-web-principles/
[FileAPI]
Marijn Kruisselbrink. File API. URL: https://w3c.github.io/FileAPI/
[FILTER-EFFECTS-2]
Filter Effects Module Level 2. Editor's Draft. URL: https://drafts.fxtf.org/filter-effects-2/
[GAMEPAD]
Steve Agoston; Matthew Reynolds. Gamepad. URL: https://w3c.github.io/gamepad/
[INTERNATIONAL-SPECS]
Richard Ishida; Addison Phillips. Internationalization Best Practices for Spec Developers. URL: https://w3c.github.io/bp-i18n-specdev/
[INTERSECTION-OBSERVER]
Stefan Zager; Emilio Cobos Álvarez; Traian Captan. Intersection Observer. URL: https://w3c.github.io/IntersectionObserver/
[LEAST-POWER]
Tim Berners-Lee; Noah Mendelsohn. The Rule of Least Power. 23 February 2006. TAG Finding. URL: https://www.w3.org/2001/tag/doc/leastPower
[POINTEREVENTS3]
Patrick Lauke; Robert Flack. Pointer Events. URL: https://w3c.github.io/pointerevents/
[REFERRER-POLICY]
Jochen Eisinger; Emily Stark. Referrer Policy. URL: https://w3c.github.io/webappsec-referrer-policy/
[REMOTE-PLAYBACK]
Mark Foltz. Remote Playback API. URL: https://w3c.github.io/remote-playback/
[RFC8890]
M. Nottingham. The Internet is for End Users. August 2020. Informational. URL: https://www.rfc-editor.org/rfc/rfc8890
[RFC9000]
J. Iyengar, Ed.; M. Thomson, Ed.. QUIC: A UDP-Based Multiplexed and Secure Transport. May 2021. Proposed Standard. URL: https://www.rfc-editor.org/rfc/rfc9000
[RFC9110]
R. Fielding, Ed.; M. Nottingham, Ed.; J. Reschke, Ed.. HTTP Semantics. June 2022. Internet Standard. URL: https://httpwg.org/specs/rfc9110.html
[UIEVENTS]
Gary Kacmarcik; Travis Leithead. UI Events. URL: https://w3c.github.io/uievents/
[UNSANCTIONED-TRACKING]
Mark Nottingham. Unsanctioned Web Tracking. 17 July 2015. TAG Finding. URL: https://www.w3.org/2001/tag/doc/unsanctioned-tracking/
[WEB-LOCKS]
Joshua Bell; Kagami Rosylight. Web Locks API. URL: https://w3c.github.io/web-locks/
[WebAudio]
Paul Adenot; Hongchan Choi. Web Audio API. URL: https://webaudio.github.io/web-audio-api/
[WebCryptoAPI]
Mark Watson. Web Cryptography API. URL: https://w3c.github.io/webcrypto/
[WEBRTC]
Cullen Jennings; et al. WebRTC: Real-Time Communication in Browsers. URL: https://w3c.github.io/webrtc-pc/
[WebTransport]
Nidhi Jaju; Victor Vasiliev. WebTransport. URL: https://w3c.github.io/webtransport/

Property Index

Name Value Initial Applies to Inh. %ages Anim­ation type Canonical order Com­puted value
font-size-adjust none | [ ex-height | cap-height | ch-width | ic-width | ic-height ]? [ from-font | ] none all elements and text yes N/A discrete if the keywords differ, otherwise by computed value type per grammar a number or the keyword nonethe keyword none, or a pair of a metric keyword and a