I’ve slowly gotten more comfortable over the years with popping open developer tools to inspect webpages to see how things work or to figure out what the heck is going on. Today a colleague and I were discussing options for linking to external sources for training. There are challenges with resources in elearning. You could just copy all the documents you need right into an elearning package, but have fun with the maintenance of that.
If it’s a document you can link right to it, but sometimes that can be an issue depending on how it’s shared or updated. If shared from cloud storage, the manage versions option lets you keep the URL address and swap out the resource Indiana Jones style.
Sometimes, we link to just the webpage, but depending on the length of the page, learners can get frustrated not being able to find what they’re looking for (what we sent them there for). I’ve leaned heavily on anchors, usually attached to headings to get learners as close to the target as possible. But what we ran into today was pages that don’t include id tags on the headings. What then?
Well, thankfully a few weeks ago I ran across this post from Alan Levine, Links to Text Fragments. At the time I thought, “neat Alan, thanks for sharing, but I’m not sure I’ll ever use that.” Well past JR, take that, you do have a use case.
So we learned a bit about the structure, which Bracken and Alan talk about in the post. Similar to your regular anchors, you add specific characters followed by the text you want to be selected and highlighted.
- #:~:text= (this gets you to point at text
- %20 (because you’ll be dealing with spaces if you’re after a phrase and not just a word)
So the example we had was to send people to a checklist. There’s some importance in having learners see the building they’re in (i.e. where they are on the website) as opposed to just dumping them into the room (i.e. the form, in this case).
So we start with the URL: https://www.macewan.ca/about-macewan/administration/health-safety-environment/safety-programs/inspections
Then we add our slug to point directly to the form link: #:~:text=office%20inspection%20checklist
And now in the course we can link out:
This opens up so many possibilities. I’m grateful I ran into Alan’s post, I would not have thought this possible.
Photo by Fré Sonneveld on Unsplash

2 responses to “HTML Tip – Links to Text Fragments”
Hah, this makes me happy to see and click. Getting the link is super easy in Chrome, select the text link to, and ctrl/right click for contextual menu, and select “Copy Link to Highlight” from the contextual menu. I’d seen that for a long time and ignore as I had no idea what it meant (interface design alert!). Bracken’s post clicked it for me.
Happens a lot!
I found the “Copy Link to Highlight” in Edge browser as well. This is going to make it much much easier! Especially for when there are special characters (read – ampersand) in the text to link to.
You got me with that last link!