Learn HTML 5 APIs

What is an API?

An API is an application programming interface, which is just a fancy way of saying that it's a way to send instructions between programmes. In this case, the instructions are between your web page and the browser to, for example, show a Google Map or offer a fullscreen view of your page.

Generally speaking, APIs are a way for you to offer more interactivity into your page.

Before HTML5, most APIs were written with JavaScript, an entirely different language. With HTML5, you can now add interactivity without having to always write JavaScript.

What kinds of APIs are there?

There are a lot of APIs you can use in HTML5, too many to cover in this tutorial, but we'll cover the big ones.

1. Drawing: You can let people draw on your web page using the <canvas> tag. However, the canvas tag is just a holder… this one still needs JavaScript to actually draw.
2. Audio/Video: You can now add a video right into your web page without having to embed a player or use YouTube. You can even add play/pause and other controls.
3. Drag and drop: You can allow people to move things around on your page.
4. Autofocus: Focusses the page on a specific item by moving the cursor there.
5. Editable: You can make content editable. We mentioned this briefly in Lesson 16.
6. History: You can add controls for going back or forward to specific pages or to relative pages (the page you were at before this one, for example).

There are a lot more HTML5 APIs and most of them require some knowledge or interaction with JavaScript as well.

Autofocus

The simplest API is autofocus. When the page loads, it takes your reader right to that spot. Let's try it on our forms page. Locate the country input box on your forms.htm page and add the autofocus="autofocus" attribute.

Autofocus

 
 <input autofocus="autofocus" type="text" list="country" name="countries">