Web Types System

To construct the page, Web browsers require multiple interactions with services. This often includes downloading images, stylesheets, and scripts. The requests can be triggered with tags like <script>, but, in the case of stylesheets, it is driven by a typed link:

<link rel="stylesheet" href="bootstrap.css">

In addition to being a trigger for browser behavior, the stylesheet rel tells clients, "this URL serves CSS." It is a contract for behaviors on both sides of the transaction, and it's one of a standard registry which includes:

<link rel="icon" href="favicon.png" type="image/png">
<link rel="next" href="/article?page=2" title="Reltypes Are Awesome! (page 2)">
<link rel="prefetch" href="/img/bob.jpg">

These rel attributes are called "reltypes." By adopting the browser's model of exchanging and searching through reltyped links, Web applications can achieve portability across services – a key requirement for the HTTPLocal architecture.

Features of reltypes

• They can be listed in groups to combine their behaviors.
• Developers can publish custom reltype specs, then use the published URL as the reltype name.
• Links are just key-value bags with href, rel, and any additional attributes set by the reltypes used. They're used most often in HTML <link> elements, but they also work in Link response headers and JSON-HAL documents.

What is stdrel?

stdrel.com is a library of common reltypes for developers to use in their APIs. It is currently in development, but will include detailed specs, examples, and libraries to get developers started. Pull requests are submitted and discussed at GitHub.

How are the reltypes used?

Reltypes can be used in any link, but they are often used in HTML <link> elements, JSON-HAL, and in the Link response header. Here's a link to a user record that, using GET, PUT, and DELETE, can be fetched, updated, and deleted:

HTML

<link rel="schema.org/Person stdrel.com/crud-item" href="/users/bob" id="bob">

JSON-HAL

{"_links": {"schema.org/Person stdrel.com/crud-item": {"href": "/users/bob", "id": "bob"} } }

Link header

Link: </users/bob>; rel="schema.org/Person stdrel.com/crud-item"; id="bob"

We know the schema of /users/bob because of schema.org/Person, and we know the supported methods because of stdrel.com/crud-item. Local.js includes a queryLinks method for searching lists of links, and a User Agent which navigates by querying service Link headers.