Topics
The topics API reports a user's likely subject-matter interests (as determined by the browser, known as topics) to iframes. This allows for interest-based advertising that does not rely on user's exact browsing history, third-party cookies, or fingerprinting. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The topics API reports a user's likely subject-matter interests (as determined by the browser, known as topics) to iframes. This allows for interest-based advertising that does not rely on user's exact browsing history, third-party cookies, or fingerprinting. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
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.
Related links
Powered by web-features