Hyperlinks have leveled up - link to a text snippet with text fragments

A person has an open book and is highlighting a passage of text with a marker. The page has a sticky post-it note for a reference.

Hyperlinks have leveled up. Text fragments enable linking directly to a specific snippet of text on any webpage. Clicking on a link with a text fragment will take you directly to the section of the document with that text, with the browser highlighting the matching text. This is a significant improvement to cross-referencing on the web.

Links look something like this: https://vercel.com/docs/accounts/plans/hobby#:~:text=As%20the%20Hobby%20plan%20is%20a%20free%20tier%20there%20are%20no%20billing%20cycles..

As you can see from the screenshot below, when you navigate to the page through this link, it has the following text highlighted in purple: “As the Hobby plan is a free tier there are no billing cycles.”.

A screenshot of the page on the hobby plan for vercel. The text 'As the Hobby plan is a free tier there are no billing cycles' is highlighted in purple

I used this link in my previous article on free static hosting to provide a direct reference in support of the claim that Vercel will never charge you anything in their hobby plan. Text fragments empower authors to create more precise references. This relieves readers of the burden of finding a passage of text themselves to understand the complete context of what is being discussed.

A text fragment is tacked onto the end of URL with #:~:text=. The text query follows a particular syntax. You can provide an exact snippet or you can specify a range of text. You can check out MDN’s breakdown of the syntax to learn more.

Creating the text fragment yourself can be a tad tedious. Luckily some browsers offer built-in support for the creation of encoded URL with a text fragment. In Chrome, you can highlight some text, right-click, and select the “copy link to highlight” option from the context menu, and it will generate a link and copy it to the clipboard.

a page is open in Chrome with a section of text is highlighted and a context menu is shown with the mouse hovering over the option that says: copy link to highlight

Also, you can style the matched text with the ::target-text pseudo-element if you wish. This is something you should definitely factor in when you have a dark and light themes.

CSS
::target-text {
background-color: yellow;
color: darkslategrey;
}

Text fragments are available in all major browsers now. I think that we should all make more of use of text fragments going forward.