Text Fragments let you specify a text snippet in the URL fragment.
When navigating to a URL with such a text fragment, the browser can emphasize
and bring it to the user's attention.
 Thomas Steiner [GitHub](https://github.com/tomayac) [LinkedIn](https://www.linkedin.com/in/thomassteinerlinkedin) [Mastodon](https://toot.cafe/@tomayac) [Bluesky](https://bsky.app/profile/tomayac.com) [Homepage](https://blog.tomayac.com/)
## Fragment identifiers
Chrome 80 was a big release. It contained a number of highly anticipated features like
[ECMAScript Modules in Web Workers](https://web.dev/articles/module-workers),
[nullish coalescing](https://v8.dev/features/nullish-coalescing),
[optional chaining](https://v8.dev/features/optional-chaining), and more. The release was, as usual,
announced through a
[blog post](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html) on the
Chromium blog. You can see an excerpt of the blog post in the following screenshot.
 Chromium blog post with red boxes around elements with an `id` attribute.
You are probably asking yourself what all the red boxes mean. They are the result of running the
following snippet in DevTools. It highlights all elements that have an `id` attribute.
document.querySelectorAll('[id]').forEach((el) => {
el.style.border = 'solid 2px red';
});
I can place a deep link to any element highlighted with a red box thanks to the
[fragment identifier](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Fragment)
which I then use in the [hash](https://developer.mozilla.org/docs/Web/API/URL/hash) of the
page's URL. Assuming I wanted to deep link to the *Give us feedback in our
[Product Forums](http://support.google.com/bin/static.py?page=portal_groups.cs)* box in the
aside, I could do so by handcrafting the URL
[`https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1`](https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1).
As you can see in the Elements panel of the Developer Tools, the element in question has an `id`
attribute with the value `HTML1`.
 Dev Tools showing the `id` of an element.
If I parse this URL with JavaScript's `URL()` constructor, the different components are revealed.
Notice the `hash` property with the value `#HTML1`.
new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
/* Creates a new `URL` object
URL {
hash: "#HTML1"
host: "blog.chromium.org"
hostname: "blog.chromium.org"
href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
origin: "https://blog.chromium.org"
password: ""
pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
port: ""
protocol: "https:"
search: ""
searchParams: URLSearchParams {}
username: ""
}
*/
The fact though that I had to open the Developer Tools to find the `id` of an element speaks volumes
about the probability this particular section of the page was meant to be linked to by the author of
the blog post.
What if I want to link to something without an `id`? Say I want to link to the *ECMAScript Modules
in Web Workers* heading. As you can see in the following screenshot, the `