How to create deep links to text within a web page
Highlight Text Fragments
The Google Chrome browser (Chromium to be more precise) and thus many popular browsers based on Chromium including Microsoft Edge, Opera, et. al. (*see full list below) have a really cool, useful, but surprisingly underutilized feature. As we all know, you can create a web URL link that refers to a specific web page. But did you know that you can also create a URL link that refers to a page and highlights specific text on that page, and automatically scroll to that text fragment without any required extensions?!
Maybe you’ve clicked on some search engine results where relevant text on a results page is highlighted without realizing that text was actually dynamically highlighted. So why not provide that same specificity when you share web info with others?
For example, rather than sending a friend a link to a long article, having to explain why it’s relevant and which parts to read, why not just send one link that also takes the visitor to the appropriate section on the page and highlights it. For content creators, rather then send readers to another reference page where they’re likely to get lost and forget to come back, you can navigate them to the specific reference and highlight it so they’re more likely to return to your page.
Once you start doing this more, you may wonder how you lived without it.
Highlight A Short Text Fragment
The concept is actually pretty simple, especially for anyone used to adding parameters to a URL. After the web page URL, simply add the text to highlight in the URL, separated by “#:~:text=”, in the form of:
For example, if we want to link to highlight “Text Fragments” on a WICG page like this:
…then the web page URL is “https://wicg.github.io/scroll-to-text-fragment/" and we want to highlight “Text Fragments”, so we pass that as a parameter at the end of the URL, separated with a special string: “#:~:text=”. However, not all characters (e.g., spaces) are allowed in the URL; those unsupported characters must be “% encoded” first. Thus, the URL would be:
Highlight Longer Text Fragment
Pretty cool, right?!
This browser feature has more capabilities such as disambiguating (if there are multiple similar phrases) by providing a prefix and/or suffix, and highlighting multiple text fragments on a page. If you’d like to create your own URLs, here’s the general URL syntax:
I hope you find it useful. Any improvement suggestions?
*Partial List of Chromium-based browsers (from ZDnet): Google Chrome Browser, Google Chrome OS, Microsoft Edge, Opera, Vivaldi, Brave, Blisk, Colibri, Epic Browser, SRWare Iron, Ungoogled Chromium, Avast Secure Browser, Amazon Silk, Samsung Internet Browser, Yandex Browser, Qihoo 360 Secure Browser, Torch Browser, Comodo Dragon, Coc Coc, Falkon, Xvast, Polarity, TheWorld Chrome, Naver Whale, Kinza, Iridium, Tungsten, Ghost Browser, Superbird, Lulumi, Chedot, Orbitum, Cent Browser, …