Text fragments

Text fragments link directly to specific text in a web page, without requiring the page author to add an ID. They use a special syntax in the URL fragment. This feature lets you create deep links to content that you don't control and may not have IDs associated. It also makes sharing links more useful by directly pointing others to specific words. Browsers may differ in how they draw attention to the linked text—usually, the text is scrolled into view and highlighted with color.

Concepts and usage

Historically, one of the web's key features has always been its ability to provide links between different documents — it is what makes the web, a web:

The issue with linking to specific document fragments is that the author of the linked page needs to put an anchor in place to actually link to. The second example above links to an h2 element with an ID of browser_compatibility:

html
<h2 id="browser_compatibility">
  <a href="#browser_compatibility">Browser compatibility</a>
</h2>

Not all documents have such anchors, and even if they do, linking to a heading might be much less obvious than linking directly to the specific text you are citing. This is where text fragments help: they allow the link author to have full control over what text to link to, without requiring any special markup in the target document. For example, a search engine may refer to a specific sentence in its search results, and clicking the link will take you directly to that sentence.

However, text fragments also have a limitation: text in a document is less stable than document structure. If the text in the linked document is updated, the fragment no longer matches, and the browser navigates to the top of the page. This is fine for transient links such as those in search results, but if you intend for the link to work over time, document fragments may be more reliable.

Syntax

url
https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

Text fragments are a kind of URL fragment, and is written after the #. The key parts to understand are as follows:

:~:

Otherwise known as the fragment directive, this sequence of characters tells the browser that what comes next is one or more user-agent instructions, which are stripped from the URL during loading so that author scripts cannot directly interact with them. User-agent instructions are also called directives.

text=

A text directive. This provides a text fragment to the browser, defining what text is to be linked to in the linked document.

textStart

A text string specifying the start of the linked text.

textEnd Optional

A text string specifying the end of the linked text.

prefix- Optional

A text string followed by a hyphen specifying what text should immediately precede the linked text, only allowing for whitespace in between. This helps the browser to select the correct linked text, in cases where there are multiple matches.

-suffix Optional

A hyphen followed by a text string specifying what text should immediately follow the linked text, only allowing for whitespace in between. This helps the browser to select the correct linked text, in cases where there are multiple matches.

Supporting browsers will scroll to and highlight the first text fragment in the linked document that matches the specified directive. Note that it is possible to specify multiple text fragments to highlight in the same URL by separating them with ampersand (&) characters.

Usage notes

  • Text strings used for the textStart, textEnd, prefix-, and -suffix values need to be percent-encoded. In addition, the standard requires the URL-safe dash character '-' to be similarly percent-encoded.

  • Matches are case-insensitive.

  • Individual textStart, textEnd, prefix-, and -suffix strings need to reside wholly inside the same block-level element, but complete matches can span across multiple element boundaries.

  • For security reasons, when linking to a cross-origin page using this feature, you should open the link in a noopener context — you need to add rel="noopener" to your <a> elements, and add noopener to your window.open() calls when using this feature.

  • Text fragments are invoked only on user-initiated navigations.

  • Text fragments are only applied to the main frame; text will not be searched inside <iframe>s, and iframe navigation will not invoke a text fragment.

  • For sites that wish to opt-out, Chromium-based browsers support a Document Policy header value that they can send so user agents will not process Text Fragments:

    http
    Document-Policy: force-load-at-top
    

Note: If the provided text fragment does not match any text in the linked document, or if the browser does not support text fragments, the whole text fragment is ignored and the top of the document is linked.

Examples

Text fragment with textStart

textStart and textEnd

Examples with prefix- and/or -suffix

URLs with multiple text fragments

You can specify multiple text fragments to highlight in the same URL by separating them with ampersand (&) characters. Let's look at a couple of examples:

If you don't see one or more of your text fragments highlighted and you are sure you've got the syntax correct, you might just be highlighting a different instance than the one you expected. It might be highlighted, but offscreen.

Styling matched text fragments

Browsers are free to style the highlighted text in whatever default way they choose. The CSS Pseudo-Elements Module Level 4 defines a pseudo-element, ::target-text, which allows you to specifying custom styling.

For example, in our scroll-to-text demo we have the following CSS:

css
::target-text {
  background-color: rebeccapurple;
  color: white;
}

Try following the above link in a supporting browser to see the effect this has.

Feature Detectability

The FragmentDirective object, which is accessed via the Document.fragmentDirective property, can be used to test whether or not text fragments are supported in a browser.

Try running the following in a supporting browser's devtools, in a tab with one or more matched text fragments:

js
document.fragmentDirective;
// returns an empty FragmentDirective object, if supported
// undefined otherwise

This functionality is mainly intended for feature detection at present. In the future, the FragmentDirective object could include additional information.

Reference

API

FragmentDirective

An object representing the text fragments. Currently empty and mainly intended for feature detection.

Document.fragmentDirective

Returns the FragmentDirective for the current document.

CSS

::target-text

Represents the highlighted text fragments in the current document. It allows authors to customize the styling of text fragments.

Specifications

Specification
URL Fragment Text Directives
# fragmentdirective
CSS Pseudo-Elements Module Level 4
# selectordef-target-text

Browser compatibility

html.elements.a.text_fragments

api.FragmentDirective

css.selectors.target-text

See also