Tired of sending links to (what is supposed to be) a specific part of a webpage only to have the recipient struggle to find the section you wanted them to see? Find out here how to link to (and highlight) any text on a website. Make it easy for others to locate the information you want to share at a glance.
First, Crocodile Rock
Like any hollow body considerably filled with air, crocodiles float.
This is not always what crocodiles want. To linger at the bottom of a lake or river (waiting for prey to come by), they do not get rid of all the air, however; they displace a bit of it with something dense and heavy.
That’s why, in the condensed version, you can see crocodiles swallow rocks when they are about to go for a dive. The stones may also help break down the food, once it has arrived, in digestion.
Now, do you want to make a link that does not stay on the surface either but dives deep and takes the reader down to any part of a page? Let’s swallow some ahrefs for just the right amount of buoyancy:
How to Link to (and Highlight) Any Text on a Website
Time needed: 2 minutes
To create a link that will open a page on the web, scroll to the desired section and highlight custom text:
- Start with a link to the page as it appears in the browser address bar.
No ‘#‘: The hash sign ‘#’ (anchor link) links to a particular part on the page and, quite naturally, can only be present once in each link; do remove # from the end along with all text after it if it is present.
- Append
#:~:text=.Here’s why: We will employ the anchor link with a target not set by the page’s author but created from the text on the page with this special syntax.
- Add the the text you want to be the target and highlighted on the page.
First match: The browser will jump to the first occurrence of the text on the page.
Escapism: For any but the most simple strings, escape the text for use in web addresses (URIs); see below.
Make it easy: Use the tool below to create the link from its parts instead of concocting it laboriously by hand.
Example: https://ladedu.com/…/#:~:text=this%20very%20text will link to this very text.
Received a link yourself? How to View a Link without Opening It
Highlighted Link to Any Text on Any Page Generator
To create a link to any text on a website:
- Paste the page’s address as well as the text you want to highlight below.
- Copy the resulting URI from the Link: field.
How to Link to (and Highlight) Any Text on a Website: FAQ
Will this work in all browsers?
No.
Scrolling to text from the URL works in
- Chrome 81 and later as well as most Chromium browsers (including Edge)
- Safari 16.1 and later.
Notably, the links will currently not work in Firefox. Other, specifically older, browsers not on the list above will also typically not let you link to any part of a page.
Speaking of Firefox: How to Remove an Element from a Website in Firefox
Can I highlight more than one passage?
Yes.
Following the first text= section, you can append further strings to highlight with &text=.
Example: https://ladedu.com/…/#:~:text=link&text=rock will highlight the first instances of link and rock on this page.
Can I link to a passage more precisely?
Yes.
You can specify what comes before and after the highlighted passage using the prefix and suffix arguments. The prefix and the suffix will not be highlighted.
For the prefix, use text-, before the highlighted text; for the suffix, append ,-text.
Example: https://ladedu.com/…/#:~:text=a-,link,-that will highlight the first instance of link that appears between a and that (as a link that).
(How to link to and highlight any text on a website tested with Safari 17 and Chrome 123 on the desktop; first published May 2024)