HOW TO link directly to a specific word on a webpage with Scroll to Text Fragment feature

Did you know you can link directly to a specific word on a webpage and have the browser automatically scroll down and highlight it? It’s called Scroll to Text Fragment, and it's a game-changer for sharing quotes, data, or proof. 

This is especially useful when the content you want to link to doesn't have a standard HTML anchor (like #heading). This feature lets you link directly to any specific word or text block on a webpage, highlighting it for the user automatically.

I was amused to find that La Opala Crockery is 100% Vegetarian and it proudly sports on its packaging the green dot logo that's typically used by food products. They also mention this claim on their blog in a long article. I wanted to share the link on a forum that mentions the exact sentence so that readers can jump to the specific point.

Here’s how the link can be constructed to highlight "100% vegetarian" -

https://www.laopala.in/blog/what-sets-laopala-cup-set-apart#:~:text=100% vegetarian

The spaces and symbols can also be URL-encoded so that the % sign becomes %25 and spaces become %20.

https://www.laopala.in/blog/what-sets-laopala-cup-set-apart#:~:text=100%25%20vegetarian

When a user clicks that link in a compatible browser (Chromium-based browsers like Chrome, Edge, Brave, and Opera), the page will automatically scroll down to the exact section discussing the vegetarian aspect and apply a temporary colored highlight to those words.

If the phrase appears multiple times on the page and you want to point to a specific occurrence, you can provide context by specifying the words immediately before or after your target text using the following parameters:

• With preceding context: text=prefix-,targetText
• With succeeding context: text=targetText,-suffix
• With both: text=prefix-,targetText,-suffix

For example, if you want to make sure it jumps specifically to where it mentions bone ash, you could append:

#:~:text=bone%20ash-,100%25%20vegetarian (This tells the browser: Find "100% vegetarian" but only if it's preceded by "bone ash").

So in summary, the URL trick that highlights your exact point the second they click is to append a special fragment identifier to the end of the URL using this syntax:

#:~:text=YOUR_TEXT_HERE

Compatibility Note

• Supported: Google Chrome, Microsoft Edge, Opera, Brave, and Android browsers.
• Fallback: If someone opens the link in a browser that doesn't support this yet (like older versions of Safari), the link will still work perfectly—it will just open the top of the webpage normally without scrolling or highlighting.