Member-only story
How to Highlight Text on Websites Using Text Fragments
Want to try out a futuristic hyperlink instead of the old-fashioned one?
We often use hyperlinks in our web pages to add a navigation link to another web page. Hyperlinks can be easily rendered on web pages using the well-known native HTML anchor tag. Further, the anchor tag offers some useful native features like allowing us to change the target window for the given URI. For example, we are able to easily set a new tab as the target window. In addition, we can use JavaScript to achieve the same goal. If JavaScript is used, pop-up windows can also be created in order to load the URI too.
Consider the following examples for the two scenarios mentioned above.
Navigation to an external web page using HTML anchor tag:
<a href="https://en.wikipedia.org/wiki/Website" target="_blank">Read more...</a>Same behavior using JavaScript:
<span style="cursor: pointer" onclick="window.open('https://en.wikipedia.org/wiki/Website')">Read more...</span>A Missing Feature
Suppose there is a web page with a large amount of text and you need to add a reference to it in one of your websites. Undoubtedly, you can simply add an HTML hyperlink. But how can you refer to a specific part of the text on the web page? You are lucky if the particular page supports direct navigation to headings like in the following example:
However, not every web page has this kind of implementation. Even though it exists, we cannot direct users to specific text in a paragraph. Therefore, a new standard feature is needed to highlight a specific text of a web page using URI. W3C has identified this requirement as a valid feature for all browsers and is going to implement a common specification as usual.
Text Fragments
URI Fragment refers to a string of characters followed by the hash mark (#) in a particular URI. Text Fragment is the newly introduced standard way to scroll and highlight…
