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.

Scroll to text fragment: a worked example

Suppose you want to send a colleague to one sentence on a library's opening-hours page: "The reading room closes at 8 pm on weekdays and 5 pm on Saturdays." The page is invented; the syntax is real. Here is how the directive grows as you make it more precise.

The encoding rules are small. Spaces become %20; a comma inside a phrase becomes %2C, a hyphen %2D and an ampersand %26, because those three characters are the separators of the directive itself. Generators do this for you. The browser-by-browser steps for copying a link to a highlight cover the built-in Copy link to highlight command in Chrome and Edge; the table above is what that command produces behind the scenes.

Expert tips

• Quote four to eight words. Shorter phrases match in the wrong place; longer ones break on the first edit to the page.
• Start and end on a word boundary. Matching respects word boundaries, so a phrase that begins mid-word never matches.
• Test in a private window. No extension can interfere there, and the page loads as a stranger would see it.
• Keep the words next to the link. When the link is part of a citation, adding a highlight link to a citation so the reader lands on the line shows the format.
• Expect late-loading text to fail. Comment threads and some news sites fill in their text after the page appears; for those, the bookmarklet from inside the loaded page is the reliable route.

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.