Text Fragment Links Explained

For twenty years the only way to link into the middle of a page was an anchor the author had placed there, an id attribute you could hang a #section on. Text fragments, specified by the Web Incubator Community Group and shipped in Chrome 80 in early 2020, let the reader choose the target instead. The link carries a few words; the browser searches the page for them, scrolls there and highlights the match. Safari adopted it in 16.1 (2022) and Firefox in 131 (2024), which makes it the first universal, server-free way to share a highlight.

The syntax

A text directive lives in the fragment part of a URL (after #), introduced by the delimiter :~:. The general form is:

Multiple directives are joined with &: #:~:text=first%20phrase&text=second%20phrase highlights both. Matching is case-insensitive and ignores differences in whitespace, and it only considers text the user could see and select (not hidden elements, not the contents of form fields). Word boundaries matter: a directive does not match in the middle of a word.

How the browser finds the passage

1. The browser loads the page and, once the document is ready, looks for the directive in the fragment.
2. It walks the visible text looking for the first occurrence of textStart that satisfies the prefix and suffix, if given.
3. If textEnd is present, it extends the match to the first following occurrence of textEnd.
4. It scrolls the match into view and applies a highlight (yellow or purple depending on the browser and version) using the ::target-text pseudo-element, which page authors can style.
5. If nothing matches, or if the text arrives too late (some browsers stop searching after a short window), the page opens at the top as if the fragment were not there.

Privacy properties

The fragment part of a URL is not sent in the HTTP request, so the website cannot know which words you highlighted or that you used a text fragment at all. The browser also refuses to process text directives in situations where they could be used to test whether hidden text exists on a page (cross-origin frames, some scripted navigations), and it only activates them on a full navigation triggered by the user. Page authors can opt a page out entirely with the header Document-Policy: force-load-at-top. In practice, a text fragment link is as private as a plain link.

Styling highlights on your own pages

If you publish pages, you can control how incoming highlights look with a few lines of CSS. Only colour properties are allowed:

Known limits and how to work around them

Where this came from

Sharing a highlighted passage used to require a service in the middle. The original Awesome Highlighter (2008) saved a copy of the page with your highlights and gave you a short link to it, and dozens of similar services did the same. That worked until the service closed, at which point every link died; our shared highlights archive page is the record of that. Text fragments move the highlight into the link itself, so it depends on nothing but the page it points to. It is the same idea, finally standardised.

Text fragments are the standard behind several tools compared elsewhere in the highlighter tools section: extensions increasingly use them for sharing (see our extension comparison), and the bookmarklet explainer shows how a one-click script builds them. They are also the most precise way to cite evidence, which is why quote tracing ends with one.