This article is the thirteenth edition of the Advent of Patterns series. In this series, running from December 1st to December 24th 2024, I will document one design or programming pattern I have noticed recently. Read more about this series.
Text fragments are links that point to a specific part of a web document. A common use case for text fragments is to link to a specific heading on a web page. This allows you to direct someone to a specific section on a web page rather than sharing a link to the web page and providing instructions on how to find the relevant section.
Documentation sites commonly support text fragments for headings. For example, I can link to the “Concepts and usage” section of the MDN page on text fragments to direct you exactly to that section. I appreciate this feature not only because I can direct someone to a specific part of a page, but also because I can bookmark the fragment so I have a direct reference to a section on a page.
MDN provides a visual anchor that indicates a text fragment link is available. This anchor is a hashtag symbol that appears when you hover over a heading. An underline is also added to the heading on hover to emphasise that the heading is a link. Here is what the design looks like when hovering over a heading:
In this case, MDN uses the id attribute to give all headings IDs. A text fragment link can then be generated with the syntax:
https://example.com/example#fragment
Such as:
https://developer.mozilla.org/en-US/docs/Web/URI/Fragment/Text_fragments#concepts_and_usage
Wikipedia has support for text fragments too. When you click a link on the table of contents, you are taken to the relevant section on the page. The URL of the page also changes to add the fragment.
The idea of “text fragments” has been expanded to support being able to link directly to text on a page, even if there is no id corresponding with the text. This allows creation of links that are even more granular than heading links.
The IndieWeb community has done work on this in the past with the idea of a “fragmention” that links to a specific fragment on a page which received several implementations. Browser vendors have also done their own work on the fundamental idea of linking to text on a page. There is now support for linking to specific text – for example, in a paragraph – across all major browsers.
The syntax for linking to text is a bit different than ids:
https://developer.mozilla.org/en-US/docs/Web/URI/Fragment/Text_fragments#:~:text=this sequence of characters
This links directly to the text “this sequence of characters” on the page. There is a visual highlight that indicates the text has been linked to. When you navigate to the link, the browser scrolls down to the exact section on the page.
NB: At the time of writing, Safari is exhibiting a strange behaviour where the text fragment is sometimes hidden from URLs.
One use case for linking directly to text is to create richer links from search results. For a while, Google Chrome has supported fragment links in “featured snippets.” Featured snippets are direct answers to user queries that are found by extracting text from an article that ranks well for the user’s query. The fragment link allows the user to go directly to read more context around the text extracted by Google.
I can imagine text fragments would be useful for creating direct links to quotations on a page that can be cited.
NB: For this particular snippet, the link did not contain a fragment. I have seen Google support them inconsistently in the featured snippet feature. In any case, this is the section on Google where a fragment link has appeared in the past.
Another use of text fragments is in GitHub where you can link directly to a line or range of lines of code. The line to which you have linked is highlighted, allowing the user to more easily identify the text to which the link points on the page.
See an example of such a link that points directly to a line of code on GitHub.
GitHub uses this feature in its search results. When you click on a search result that links to specific code, GitHub can take you directly to the specific line of code you clicked on in the search. This helps me stay focused on my task. If GitHub linked only to the file, I would have to remember the line number from the search result.
I am curious: where have you seen text fragments used? Have you used text fragments? What are your favourite uses of this pattern?
To learn more about the syntax of text fragments, I recommend the MDN text fragments documentation.
