URL Fragment Text Directives
URL Fragment Text Directives allow web developers to specify instructions in URL fragments for user agents to process, such as highlighting specific text on a page or scrolling to a specific text fragment.
Browser Support
Basic Text Fragment
Create links that highlight specific text when visited. This example shows how to use the :~:text= directive to make browsers automatically find, scroll to, and highlight exact phrases on a webpage - making it easy to direct readers to the most important information.
This is a sample text content to demonstrate URL fragment text directives.
The text fragment directive allows you to highlight specific text on a webpage using URL fragments.
Click the button below to simulate a text fragment directive example in action.
The highlighted text simulates what a user would see when visiting a URL with a text fragment directive.
Output
Click Run to see output...Advanced Text Fragments
Target text precisely even when there are multiple identical matches on a page. This example demonstrates how to use context parameters (prefix and suffix) to disambiguate similar text, and how to highlight content that spans across multiple HTML elements - ensuring your links always point to exactly the right content.
This example demonstrates different types of text fragment directives.
You can create a unique fragment identifier for any text on the page.
For a specific instance of fragment with context, you can use prefix and suffix.
You can even highlight text that spans across elements, like this highlighted text.
Simple text fragment: Highlights exact text match.
Context-aware fragment: Uses prefix/suffix for precise matching.
Cross-element fragment: Highlights text spanning multiple elements.
Output
Click Run to see output...Fragment URL Creation
Build properly formatted text fragment URLs with this interactive tool. This example helps you create shareable links that highlight specific text, handling all the necessary encoding and syntax requirements automatically - making it easy to generate links for social media, documentation, or educational purposes.
The generated URL includes encoded text fragments that will highlight the specified text when visited.
Output
Click Run to see output...