Short answer: The cleanest way today is a text fragment. Add #:~:text= plus the words you want to the end of a URL, and the browser scrolls to and highlights that exact text. In Chrome you can generate one automatically by right-clicking a selection and choosing "Copy Link to Highlight."
I often want to send someone a long article but point them at one paragraph. The old annotation apps I used to recommend have faded, and browsers now do this natively, which is faster and needs no third-party service.
What is a text fragment and how do I make one?
A text fragment is a special piece you append to a URL that tells the browser which words to find and highlight. The format looks like this:
https://example.com/article#:~:text=the%20exact%20phrase
The easiest way to create one is not to type it by hand:
- In Chrome, Edge, or Safari, select the sentence you care about on the page.
- Right-click the selection.
- Choose Copy Link to Highlight (Chrome and Edge) or Copy Link with Highlight (Safari).
- Paste the link anywhere. When someone opens it, the browser jumps to that text and highlights it.
Behind the scenes this uses the Text Fragments feature. To target a range you can include start and end: #:~:text=start,end links a whole span from the start phrase to the end phrase.
How do anchor links differ?
Anchor links point to an element the page author gave an id to. If a heading has id="pricing", then https://example.com/page#pricing jumps straight to it. Many sites add these to headings automatically, so hovering a heading often reveals a link icon you can copy. The difference: anchors need the page to have defined the id, whereas text fragments work on any text without the author doing anything.
Which method should I use?
| Method | Works when | Highlights text? | Needs page support? |
|---|---|---|---|
| Text fragment (#:~:text=) | Any specific words on the page | Yes | No |
| Anchor link (#id) | The section has an id | No, just scrolls | Yes |
| Author-provided heading link | Site adds anchor icons | No | Yes |
How do I add my own anchors to a page I control?
If I am writing HTML, I give the target element an id and link to it. I set <h2 id="setup">Setup</h2> and then link with <a href="#setup">Jump to setup</a>. That same URL with #setup on the end works when shared externally too.
What is the tip most guides miss?
Text fragments can break if the wording is common or repeats on the page. My fix is to select a slightly longer, more unique sentence so the browser lands on the right spot. Also, a fragment fails silently if the site later edits that text, so for anything you need to stay permanent, capture the page in a service like the Wayback Machine first and share the archived URL with the fragment appended. That way the citation survives even if the original page changes.
Frequently asked questions
Do text fragment links work in every browser?
They work in Chrome, Edge, Safari, and other Chromium-based browsers, and Firefox now supports opening them. A browser that does not understand the fragment simply loads the page normally without the highlight.
Why does my text fragment not highlight anything?
Usually the wording no longer matches the page, the phrase is not unique, or special characters were not encoded. Select a longer, unique sentence and regenerate the link with the browser's copy option.
Can I link to a specific part of a PDF?
Yes for pages: append #page=5 to a PDF URL to open at page five in most viewers. Highlighting exact text inside a PDF is not universally supported the way text fragments are on web pages.
What is the difference between an anchor and a text fragment?
An anchor jumps to an element the author gave an id and does not highlight. A text fragment finds and highlights any words you specify and needs no cooperation from the page author.
Comments
Post a Comment
If you have anything in mind, please let me know!