How to create sharable links to highlighted content using text fragments in browser URL

The internet has revolutionized how we access and share information. One of the latest advancements in web navigation is the use of text fragments in URLs to create sharable links that direct users to specific highlighted text on a webpage. This feature, supported by modern browsers, enhances the user experience by allowing precise navigation and sharing of specific content within a larger document.

How to Create Text Fragment Links in URLs

Text fragments are a part of the URL specification introduced by Google in 2020. This feature allows users to link to a specific part of a webpage using a special syntax in the URL. The format involves appending #:~:text= followed by the text [highlighted_text] you want to highlight and share: 

#:~:text=[highlighted_text]

For instance, suppose you want to highlight the text “Parse and extract information from your email messages to Google Sheets” that includes spaces on the page https://support.cloudhq.net/category/browser-extensions/export-emails-to-excel-csv-or-google-sheet/

  1. Identify the text to be highlighted: “Parse and extract information from your email messages to Google Sheets”
  2. Copy text “Parse and extract information from your email messages to Google Sheets” to the text editor. For that purposes you can use Text Editor for Google Drive
  3. Replace spaces with %20, so the encoded text becomes:

    Parse%20and%20extract%20information%20from%20your%20email%20messages%20to%20Google%20Sheets.

    The complete URL becomes:
    https://support.cloudhq.net/category/browser-extensions/export-emails-to-excel-csv-or-google-sheet/#:~:text=Parse%20and%20extract%20information%20from%20your%20email%20messages%20to%20Google%20Sheets

  4. When a user clicks this link, their browser will scroll to and highlight the specified text fragment.

Text Replacement Rules for URLs

When creating text fragment links, it’s important to replace certain characters to ensure the URL is correctly formatted. Here are some common replacements:

  • Space: Replace with %20
  • Tab: Replace with %09
  • New Line: Replace with %0A
  • Carriage Return: Replace with %0D
  • Exclamation Mark: Replace with %21
  • Double Quote: Replace with %22
  • Hash: Replace with %23
  • Dollar Sign: Replace with %24
  • Percent: Replace with %25
  • Ampersand: Replace with %26
  • Apostrophe: Replace with %27
  • Left Parenthesis: Replace with %28
  • Right Parenthesis: Replace with %29

Benefits of Using Text Fragments

Text fragments in URLs offer several advantages:

  • Improved Navigation: Users can be directed to the exact portion of a webpage, reducing the time spent searching for relevant information.
  • Enhanced Sharing: Sharing specific sections of content becomes easier, which is particularly useful for academic, professional, and collaborative contexts.
  • Increased Engagement: By highlighting specific information, users are more likely to engage with and understand the shared content.

Conclusion

Text fragments in URLs represent a significant advancement in web navigation, providing a simple yet powerful way to share specific information. As browser support expands, this feature is likely to become an essential tool for enhancing the precision and efficiency of web interactions.

Tagged: