Topics
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
Warning: This feature is currently opposed by two browser vendors. See the Standards positions section below for details of opposition.
Note: An Enrollment process is required to use this feature in your applications.
The browsingTopics() method of the Document interface returns a promise that fulfills with an array of objects representing the top topics for the user, one from each of the last three epochs. These topics could then be returned to the ad tech platform in a subsequent fetch request. By default, the method also causes the browser to record the current page visit as observed by the caller, so the page's hostname can later be used in topics calculation.
See Using the Topics API for more details.
Note: browsingTopics() does not rely on HTTP headers to send topics and mark topics as observed like the other Topics API enabling features, but it is somewhat less performant. You are advised to use one of the HTTP header-using features, falling back to browsingTopics() only in situations where the headers cannot be modified.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
api.Document.browsingTopics Deprecated Non-standard | 126 | 126 | | | 126 | |
| HTML attribute | ||||||
browsingtopics Deprecated Non-standard | 126 | 126 | | | 126 | |
| DOM API | ||||||
init_browsingTopics_parameter Deprecated Non-standard `init.browsingTopics` parameter | 126 | 126 | | | 126 | |
browsingTopics Deprecated Non-standard The browsingTopics property of the HTMLIFrameElement interface is a boolean specifying that the selected topics for the current user should be sent with the request for the associated iframe's source in a Sec-Browsing-Topics header. This reflects the browsingtopics HTML attribute. | 126 | 126 | | | 126 | |
Request (init browsingTopics parameter) Deprecated Non-standard `init.browsingTopics` parameter | 126 | 126 | | | 126 | |
| Other | ||||||
html.elements.iframe.allow.browsing-topics Deprecated Non-standard | 115 | 115 | | | 115 | |
http.headers.Observe-Browsing-Topics Deprecated Non-standard The HTTP Observe-Browsing-Topics response header is used to mark topics of interest inferred from a calling site's URL (i.e., the site where the ad tech iframe is embedded) as observed in the response to a request generated by a feature that enables the Topics API. The browser will subsequently use those topics to calculate top topics for the current user… | 115 | 115 | | | 115 | |
http.headers.Permissions-Policy.browsing-topics Deprecated Non-standard The HTTP Permissions-Policy header browsing-topics directive controls access to the Topics API. | 115 | 115 | | | 115 | |
http.headers.Sec-Browsing-Topics Deprecated Non-standard The HTTP Sec-Browsing-Topics request header sends the selected topics for the current user along with the associated request, which are used by an ad tech platform to choose a personalized ad to display. | 115 | 115 | | | 115 | |
Syntax
const topics = await document.browsingTopics();
for (const topic of topics) {
console.log('Topic:', topic.topic, 'Version:', topic.version);
} Use cases
-
Use Topics
Use Topics when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
-
Handle edge cases
Apply Topics to solve a focused requirement without redesigning the whole page architecture.
Cautions
- Test Topics in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Make sure Topics supports the intended task without making the page harder to perceive, understand, or operate.