Links to text fragments — HTML feature intended for authors

Developers use them only in documentation, they are more user-friendly than links with tag ids.

When you click a link, the browser usually displays the top of the target page. If a link additionally includes the id of an HTML tag in the target page, the browser will scroll the loaded page to the specified tag. For example, if you click a link https://marian-caikovski.medium.com/uninstall-any-preinstalled-system-app-from-android-cell-phone-2f3dc47f69e0#d617, the browser will load the page and then will scroll it down so that the paragraph with obscure id d617 is shown in the top of the window.

To create the link, I had to find the automatically created id of the paragraph in the source code of the page, which was not difficult with Chrome DevTools (just right-click the paragraph and select Inspect option in the context menu).

But what if I wanted to add a link to a paragraph without id? Or to several sentences in the middle of a huge paragraph? Imagine I am citing someone’s statement and I want to include the exact reference to the original passage.

In Chrome, the most popular internet browser, it is easier than creating links to page sections with ids.

For example if you click a link to a post about a funny movie https://medium.com/framerated/vivarium-2019-328a935c4cec#:~:text=It could’ve,cult classic., two sentences in the middle of some paragraph will be scrolled into the center of the view and highlighted in yellow.

To create a link to an arbitrary text fragment, the characters at the beginning and end of the target text have to be added to the address of the page. The delimiting characters have to be separated by a comma (it means they cannot contain commas) and, obviously, each string has to match a unique place in the page so that browser can recognize the target text. The address of the page and the delimiting character strings have to be separated by an instruction #:~:text=.

If the end string is left out, only the supplied characters will be highlighted.

Multiple text fragments can also be highlighted if they are displayed close together in a page. If you click https://gs.statcounter.com/browser-market-share#:~:text=Chrome&text=Edge you will learn that the two highlighted browsers make up ~70% of the world’s internet browsers.

In a link, the second and following text fragments have to be preceded by an instruction &text=.

Browser compatibility

At the moment, the Text Fragments feature is implemented in Chrome and Microsoft Edge. The users of Safari and Firefox have to use plugins to enjoy this feature.

A post by Chrome team https://web.dev/text-fragments/ describes this feature in more detail.