I started reading up on using HATEOAS for an application and thought that it might be a good idea to use structured HTML for the data as opposed to use for instance json.

The below example:

```
{
    "name": "Alice",
    "avatar": "data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"
    "links": [ {
        "rel": "self",
        "href": "http://localhost:8080/customer/1"
    },
    {
        "rel": "up",
        "href": "http://localhost:8080/customer"
    }, 
    {
        "rel": "orders",
        "href": "http://localhost:8080/customer/1/order"
    }
    ]
}

```

could be rewritten in HTML as:

```html
<html><head>
        <script type="text/javascript" src="/site-wide-script.js"></script>
        <script type="text/javascript" src="script.js"></script>
        <link rel="stylesheet" href="/site-wide-styles.css">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body data-type="customer">
        <div data-attribute="name">Alice</div>
        <div data-attribute="avatar"><img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" alt="avatar"></div>

        <nav>
            <ul>
                <a href="http://localhost:8080/customer/1" rel="self">Info</a>
                <a href="http://localhost:8080/customer" rel="up">Customers</a>
                <a href="http://localhost:8080/customer/1/order" rel="customers">Orders</a>
            </ul>
            <ul>
                <form method="put">
                    <label>Name<input type="text" name="name"></label>
                    <label>Avatar<input type="file" name="avatar" accept="image/gif, image/jpeg"></label>
                    <input type="submit" value="Edit">
                </form>
            </ul>
            <ul>
                <form method="delete">
                    <input type="submit" value="Delete">
                </form>
            </ul>
        </nav>
    </body></html>
```

The above would represent the "customer" along with all the actions that can be taken on this entity with the added benefit of specifying how those actions should be performed.

My idea is to create a very progressive web app that always provides the user with their capabilities and that mainly use the same `site-wide-script.js` and `site-wide-stylesheet.css` to modify how things are displayed in a consistent manner across all views in the UI. The other script and stylesheet could potentially be used to do something very entity specific (e.g. more advanced validation in some cases, or dyamically pulling in sub entities into the same UI).

Essentially this uses the UI as the data carrier and might make building for instance a mobile app more cumbersome...

**Are there any arguments against representing the data in this way when doing HATEOAS aside from the obvious size difference of the responses?**

* Is it invalid according to some RFC?
* Has this been tried somewhere else and failed (it seems most HATEOAS resources use examples with json or xml)?
* Are there data that can not be represented in this manner in a good way?