Until now, the only way to link to a specific section or part of a page is to link to an ID. But what if a page does not have an ID in that section? In fact in long form content such as blog posts with h2 headers, you would not expect these to have IDs, so this is a common issue.

Recently 2 browsers have begun to support a content based anchor link. In other words you can specific to text content you would like to in the url, for the url to automatically scroll directly to that part of the page.

You add #:~:text= to the end of the url followed by the text. If there are multiple words you can use space as you normally would when you click enter %20 will automatically be subsituted for the spaces and will work as expected.

It is not case sensitive and it will highlight the text in purple. Pretty nifty!

For example this url links to the text “Structured Design Process”
https://masterywebsites.com/web-design/#:~:text=structured%20design%20process (opens in a new tab)

As of now April 2023, this only works in Chrome and Microsoft Edge. Hopefully the other browsers begin to support this because it is super useful.