fragmention

From IndieWeb
(Redirected from fragmentions)

A fragmention is an extension to URL syntax that links and cites a phrase within a document by using a URL fragment consisting of the phrase itself, including whitespace.

Example Fragmention:


Status
This is a Living Specification yet mature enough to encourage implementations and feedback.
Latest Published Version
https://indieweb.org/fragmention
Participate
issues
discussion on #indieweb-dev (on Libera IRC)
Editor
Kevin Marks
Authors
Other contributors: revision history
License
Per CC0, to the extent possible under law, the editor(s) have waived all copyright and related or neighboring rights to this work. In addition, as of 2026-02-16, the editors have made this specification available under the Open Web Foundation Agreement Version 1.0.

Behavior

Fragmentions find the first matching phrase in a document and focus its closest surrounding element. The match is determined by the case-sensitive string following the # The closest surrounding element may be a span, paragraph, heading, button, input, or any other container.

Use Cases

If you click on a link to read a specific part of a web page, finding the right part of the document can be fiddly, especially on a phone. You end up scrolling aimlessly, or trying to use the hidden "find in page" feature.

To scroll stright to the right bit of a web page, we need to link to any text on the page, not just places where the author put in an id or name. The simplest way to do this is make the browser try a bit harder when given a fragment to follow your intent.

Citation

While you can use <blockquote> to quote a text directly, linking to it in context is important too, and being able to link to the mentioned text directly is a big advantage.

Linking to a passage robustly

Web pages do get reformatted and relaid out. By linking to the actual text of the page, rather than the structural elements, the link is more robust, and the linked-to text is available in the fragment itself.

Annotation

By combining a fragment link with webmention you can direct your comment to be alongside part of the linked-to page, rather than the whole of it.

Syntax

As an HTML id must not contain any whitespace, we can be sure that a fragment that includes space characters will not conflict with any existing element ID's. A fragmention MUST include at least one space character.

(space)
Use %20 (instead of + ) for space characters in your fragmention.
+
Fragmentions are decoded before search, which means + plus signs can be interpreted as spaces and thus MUST be escaped (%2B) if you mean to refer to a literal "+" character like "a+b" (a%2Bb).
#
If your fragmention text contains a literal "#" e.g. "Use my #hashtag", you MUST URL-escape it, e.g. "Use+my+%23hashtag".

Processing Model

To process a fragmention, we don't need a big change to the HTML spec. The HTML 5 §7.8.9 Navigating to a fragment section has a subsection find a potential indicated element as follows:

To find a potential indicated element given a string fragment, run these steps:

  1. If there is an element in the document tree that has an ID equal to fragment, then return the first such element in tree order.

  2. If there is an a element in the document

    tree that has a name attribute whose value is equal to

    fragment, then return the first such element in tree order.

  3. Return null.

We propose amending this to add a 3rd step after the existing id and name searching so it reads as follows:

To find a potential indicated element given a string fragment, run these steps:

  1. If there is an element in the document tree that has an ID equal to fragment, then return the first such element in tree order.

  2. If there is an a element in the document

    tree that has a name attribute whose value is equal to

    fragment, then return the first such element in tree order.

  3. Search through the plain text content of the document tree for contiguous text that matches the fragment with white space collapsing. If there is a match, return the outer element that contains the text completely.

  4. Return null.

Open Source


IndieWeb Examples

Implementations on IndieWeb sites.

  • Tantek Çelik supports fragmentions on all tantek.com post permalinks since 2014-07-26 using the fragmention.min.js open source polyfill, and CSS that highlights the element containing the fragmention in yellow and fades to very light yellow.
  • Ben's Site - simple use of the open source polyfill, included on every page.
  • Bret Comnes supports fragmentions and animated background highlighting on the upcoming base jekyll boilerplate site. example

Silo Examples

UI for Fragmention-generation

Examples of user-interfaces for generating a fragmention from some selected text

  • Rogue Amoeba shared a bookmarklet to generate a fragmentation with highlighting and copy it to the clipboard.

Challenges

While most find the idea of fragmentions delightful, there are differing ideas on how they should work. We ask contributors to justify feature requests with concrete real world examples, as tests in the wild may reveal best practices. Otherwise, any of these challenges could be appended with, “So, uh, what do you think?”

rejected double-hash URL style

The first draft of this used double hash anchors ## and escaped the spaces in the fragment with + signs. Experimentation shows that this causes problems with URL parsing in some cases as double-hash is an invalid URL, and plus signs in fragments are not escaped as spaces, only in the query string.

As id's and anchors are not able to contain spaces, this extra markup is unnecessary.

The URL spec doesn't define fragments to contain hash signs, so links like <a href="##foo"> may fail validation, or be misparsed by strict URL parsers. if this is an issue, we may need to switch to #*

For future reference. Valid characters as per URL spec are: ALPHA / DIGIT / "-" / "." / "_" / "~" / "%" HEXDIG HEXDIG / "!" / "$" / "&" / "'" / "(" / ")" / "*" / "+" / "," / ";" / "=" / ":" / "@" / "/" / "?" -Sandeep.io 20:58, 23 April 2014 (PDT)

On the other hand, HTML5 id's can contain #. So browsers may interpret links like <a href="##foo"> with two meanings - the question is if IDs starting with # occur on the web.

The initial feedback is that few people concern themselves with hash fragment validation, and even less would (at least, knowingly) use them in this way.


Further thought: as HTML5 ids can contain any text except a space character, any fragment with a space in CANNOT refer to an id, so could be treated as a fragmention. So any fragmention of more than one word may not even need the ##.

The problem with this approach is that auto-linkers and URLs in other context (like plain text) don't know where the URL ends. -Sandeep.io 20:56, 23 April 2014 (PDT)


Firefox drops the first # on redirect: For instance http://kartikprabhu.com/static/demo/fragmention.html##was+still redirects to an https version which should be https://kartikprabhu.com/static/demo/fragmention.html##was+still but Firefox drops one of the # to give https://kartikprabhu.com/static/demo/fragmention.html#was+still . Strangely enough http://kartikprabhu.com/static/demo/fragmention.html###was+still fixes this (Firefox only drops one #) and http://kartikprabhu.com/static/demo/fragmention.html#%23was+still also seems to work.

Sensitivity

After trying it both ways, collapsing white space works better, as it is very hard to generate invisible escaped characters accurately.

Matching case is strict, but makes it easier to target specific text. Ignoring case is cavalier, but makes it easier to target anything.

The initial feedback is conflicting. Some expected fuzzy matching. Others expected specific matching. Most agreed that it depends on your specific use-cases, which are sorely lacking in most of the annotations discussions. Fuzzy matching could be seen as a further fallback strategy if direct matching fails.


Icon proposals

(Todo: upload images instead of linking.)