How to Hypermedia

HTML representation

Introduction

You are going to now see an example of an HTML representation that can load the JSON representation. The server must provide a link to the resource and a link to the code on demand.

The HTML representation

When we request a page in a browser, it generally asks for HTML (this is called content negotiation) as the first representation that it wants. By building a server that responds to these requests we get two things:

We don’t have to change any settings in the browsers (no plugins or configuration)

HTML allows us to add functionality to the page like clicking on links and adding rich functionality (that doesn’t exist in JSON)

The HTML that looks like this:

<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Resource</title>
      <link rel="self" href="http://localhost:5000/" />
      <link rel="me" href="http://localhost:5000/user/me" />
      <link rel="authenticate" href="http://localhost:5000/authenticate" />
      <link rel="tags" href="http://localhost:5000/tag" />
      <link rel="users" href="http://localhost:5000/user" />
    </head>
    <body>
      <div id="app">Intialising ...</div>
      <script src="http://localhost:8080/api.js"></script>
    </body>
</html>

Two lines in the HTML are highlighted:

The link relation self which is the resource to be loaded which also is the URL in the address bar in the browser.

<link rel="self" href="http://localhost:5000/" />

The code on demand which is the javascript that does all the heavy lifting. A careful eye will also see that the javascript can (and should) be served up from another domain (ie a CDN).

<script src="http://localhost:8080/api.js"></script>

This tutorial separates the ASP.NET Core C# code that generates this HTML and the javascript which is the api.js).

Quick start on content negotiation

Read here for more on understanding content negotiation values particularly in relation to q values.

This example shows that text/html is the highest priority 0.9 (read 90%).

Unlock the next chapter

Why do we need to care about HTML representations of a resource?

Because HTML, javascript and CSS are ubiquitous

Because browsers content negotiation asks for HTML as the highest priority

Because hypermedia is more than data

Because all of the above

Skip