Newly availableUseful in modern browsers, but confirm support before making it a core requirement.
Other Newly available

Scroll to text fragment

Text fragments are URL fragments on the form #:~:text=snippet and link to a snippet of text within a page. The browser may scroll, highlight, or otherwise bring that text to the reader's attention. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Other

Overview

Text fragments are URL fragments on the form #:~:text=snippet and link to a snippet of text within a page. The browser may scroll, highlight, or otherwise bring that text to the reader's attention. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
FragmentDirective
81
83
131
18.4
81
18.4
HTML attribute
text_fragments

URL text fragments
80
80
131
16.1
80
16.1
DOM API
fragmentDirective

The fragmentDirective read-only property of the Document interface returns the FragmentDirective for the current document.
86
86
131
18.4
86
18.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
<!-- URLにテキストフラグメントを指定 -->
<a href="https://example.com/page#:~:text=重要なテキスト">
  Direct link to the relevant text
</a>
<!-- 範囲指定も可能 -->
<!-- #:~:text=開始テキスト,終了テキスト -->

Live demo

Fragment format

Show the URL fragment syntax used to target visible text in a document.

PreviewFullscreen

Why it is useful

Explain how deep links can focus readers on a relevant sentence or paragraph.

PreviewFullscreen

Use with care

Text fragment links depend on page text staying stable over time.

PreviewFullscreen

Use cases

  • Use Scroll to text fragment

    Use Scroll to text fragment when standard HTML needs a more specific platform feature, semantic signal, or browser capability.

  • Handle edge cases

    Apply Scroll to text fragment to solve a focused requirement without redesigning the whole page architecture.

Cautions

  • Test Scroll to text fragment in your target browsers and input environments before depending on it as a primary behavior.
  • Provide a fallback path or acceptable degradation strategy when support is still limited.

Accessibility

  • Make sure Scroll to text fragment supports the intended task without making the page harder to perceive, understand, or operate.

Related links

Powered by web-features