A fragment identifier is the optional final component of a URL, beginning with the hash mark (#), that directs the browser to a specific subordinate resource within a primary document. It functions as an internal bookmark, allowing users to land directly on a heading, video timestamp, or PDF page. Because fragment identifiers are processed exclusively on the client side, they do not trigger a page reload or send data to the web server.
What is a Fragment Identifier?
The fragment identifier (also called a "URI fragment" or "hash") follows the main path and any optional query strings in a URL. In the example https://example.com/index.html#section1, the string "section1" is the identifier.
Its primary technical characteristic is that the browser (the client) does not send it to the server when requesting a document. Instead, the browser retrieves the entire resource first, identifies the document's type (MIME type), and then uses the fragment value to locate or display the correct portion of that content.
Why Fragment Identifiers Matter
- Improved User Experience: Marketers use fragments to link users directly to relevant answers in long-form content, such as FAQs or technical manuals.
- Precise Content Targeting: They allow deep linking into non-HTML files, such as specific pages in a PDF or specific clips in a video.
- Single Page Application (SPA) Navigation: Developers use fragments to emulate the browser’s "back" button functionality in apps that do not require full page reloads.
- Text Highlighting: Modern browser features allow for linking directly to specific words or phrases, even if the page author did not include an anchor tag.
- Documentation Efficiency: [Over 88,000 code files on GitHub use the .pdf#page= fragment identifier] (PDF Association) to guide users through complex documentation.
How a Fragment Identifier Works
The processing of a fragment follows a standard sequence:
- Client Request: The browser parses the URL, contacts the server, and sends everything except the fragment.
- Server Response: The server returns the resource (e.g., an HTML or PDF file) and identifies the MIME type.
- Client Processing: The browser waits for the resource to arrive. It then checks the fragment identifier against the document structure.
- Resource Alignment: If the fragment matches an ID or name attribute in the code, the browser scrolls to that position or executes a specific command (like playing a video from a timestamp).
Types of Fragment Identifiers
| Type | Syntax Example | Use Case |
|---|---|---|
| HTML Anchor | #heading-1 |
Scrolls to an element with id="heading-1". |
| PDF Open Parameters | #page=5 |
Opens a PDF directly to the fifth page. |
| Media Fragments | #t=10,20 |
Plays a video or audio file from 10 to 20 seconds. |
| Text Fragments | #:~:text=word |
Highlights and scrolls to the first instance of "word". |
| CSV Selectors | #row=4 |
Selects the fourth row in a spreadsheet document. |
| JSON Pointers | #/foo |
Extracts a specific key-value pair from a JSON document. |
Best Practices
- Use stable ID attributes. Ensure the
idornameattributes for your sections remain consistent even when you update content. Changing an ID will break all existing external links to that fragment. - Keep naming conventions simple. Use hyphens or underscores to separate words (e.g.,
#contact-us). In XML documents, identifiers must begin with a letter, underscore, or colon, and cannot start with a digit or hyphen. - Utilize Named Destinations in PDFs. Instead of linking to a page number (which can change during edits), use a "Named Destination" to ensure the link remains robust across different document versions.
- Combine parameters logically. For PDFs or media, you can use an ampersand to combine commands, such as
#page=3&zoom=200.
Common Mistakes
Mistake: Assuming the server can see the fragment identifier. Fix: Do not use fragment identifiers for server-side logic like user authentication or dynamic data filtering. The server never receives the hash.
Mistake: Using fragment identifiers for SEO in dynamic apps.
Fix: Use the history.pushState() method for cleaner URLs. [Google deprecated its hash-bang AJAX crawling scheme in 2015] (Wikipedia) and now recommends progressive enhancement for better indexing.
Mistake: Forgetting case sensitivity.
Fix: Most fragment identifiers are case-sensitive. Linking to #Table will not work if the ID in the document is #table.
Mistake: Creating duplicate IDs.
Fix: Each id attribute on a page must be unique. Browsers will typically scroll only to the first instance of an ID found in the document.
Examples
Example scenario: Deep-linking a Tutorial Video
A marketer wants a user to see a specific 10-second instruction. They use the URL tutorial.mp4#t=50,60. The browser loads the video and immediately starts playback at the 50-second mark.
Example scenario: Directing to a PDF Chapter
A manual contains 200 pages. To help a user find "Chapter 3" immediately, a link is created using handbook.pdf#nameddest=Chapter3. This avoids forcing the user to find the page manually.
Example scenario: Highlighting a Search Result
For browsers that support text fragments, [Google Chrome 80 introduced support for text search-based fragment identifiers] (Wikipedia). A link like page.html#:~:text=marketing-strategy will scroll the user to that phrase and highlight it in yellow automatically.
FAQ
Do fragment identifiers affect my page’s SEO?
Standard anchor fragments for internal navigation do not hurt SEO and can actually help users find relevant content. However, using "hash-bangs" (#!) for navigation in single-page applications is no longer a recommended SEO practice. Search engines now prefer standard URLs (clean URLs) managed through JavaScript's History API.
Are fragment identifiers case-sensitive?
Yes. In most document types, including HTML, the fragment must match the id or name attribute exactly in terms of capitalization.
Why did my PDF fragment stop working in a specific browser? Browser support for PDF fragments varies. While Chrome, Edge, and Firefox support basic page jumping, more advanced features like rectangular zoom or highlighting are not supported by all built-in PDF viewers.
Can I use a fragment to highlight text on any website?
Yes, if you use a browser like Chrome (version 80+) or Firefox (version 131+). You can append #:~:text=[your-text] to almost any URL to highlight that specific content upon arrival.
What happens if I use an empty fragment like #?
The generic syntax allows for an empty fragment. In a standard web browser, a URL ending in # will usually just display the top of the document.
