Links to Text Fragments

I feel father comfortable swimming in HTML and writing the stuff by hand (I thought at one time everyone would learn to write HTML). It never tops being refreshing to learn one more trick.

This started with a Mastodon post by Bracken Mosbacker:

It reminded me that I have many times in the last few years I have seen Google search results return links like this, e.g. usually the top (non GenAI) result links to a source with that longer URL and it scrolls to and highlights the text e.g. when I was searching for some information on putting down laminate flooring, Google decided to give me a highlighted sentence.

I usually shrugged it off, as usually I wanted the source URL, not this one with all the gobbledy gook on the end.

But @bracken’s post made me think there was a potential use here. If you are building your own web pages, using the old anchor link provided this, or later I learned any element with an id=XXXXXX CSS declaration could be a hook that you could link directly to.

This ability thought suggests you can make a link to goes directly (i.e. what they used to call a “deep link”) to specific chunk of text in any web page.

I did a quick text a very manual way, I used the parameter Bracken shared, and manually created a scroll-to link in one of my posts. This required copying the text, running it through a tool that URLencodes text and adding the :~:text= on the end of my URL and adding the encoded text part.

That’s a lot of work. I started to think I would need to build a Javascript booklet to create this for a selected portion of the page, but when I replied with that, Bracken gave me the keys to the shop.

It’s actually in the contextual menu when you select a chunk of text and choose “Select link to highlight” I have seen that before, but it never clicked what it meant.

I went down many scrolls to one of my posts, used the contextual menu to create a link relevant to anyone running Feed WordPress on how to general OPML files.

This gets very interesting- it’s one thing to share a link to a resource, but why not link to maybe a key sentence in it? That surely has potential for educators!

I thought maybe you could do something to make a link to perhaps the alternative text for an image, e.g. you could deep link to an image but not give away the location with text. That does not work. It seems the text has to be something on a page.

I then thought what about having a hidden message in a page, you know, white text on a white background. You could then make a link to reveals that quite easily.

Also I was spinning through some kind of DS106is creative challenge, that is a bit like blackout poetry but you could have a series of these links to different web page that highlights key lines that together make a poem. I decided to now go through and make that example now, so I give someone a free idea to pursue.

There is much much more you can do with Text Fragments as spelled out in the MDN docs — note what I did with my links