How to Make the Most of HTML APIs

HTML5 has been around for quite some time and it brought along a whole slew of new semantic elements. If you do a quick search, you’ll be able to find plenty of tutorials that give an in-depth explanation of what’s new in HTML5, what makes it so great, and how to transition from (X)HTML to HTML5.

But, HTML5 also introduced various application programming interfaces that are far less discussed, yet they form a large part of HTML5 specification and are predicted to dominate the future of web development. Some of them have been around but never documented, while others came about at the same time as HTML5.

HTML5 APIs use HTML5, CSS, and JavaScript to create Web pages that can easily adapt to a variety of devices such as smartphones, tablets, desktop computers, smart TVs, and more. They can also be used to create desktop and mobile applications.

What’s The Benefit of Using an HTML API?

There is no doubt that you can use JavaScript to achieve the same purpose an HTML API would. But, using JavaScript means relying on external files whereas using an HTML API allows you to have all the protocols and the definitions in the HTML itself. It simplifies the API design which is the core principle of creating your own API.

On top of that, it also facilitates to collaboration between you (the programmer) and your co-worker (the designer). Keep in mind that not everybody who writes HTML and CSS is familiar with JavaScript. Using something that is already familiar to them, makes it easier on the designers to come up with designs and mockups that are easier to execute.

Examples of Existing HTML5 APIs

Some of the existing HTML5 APIs include:

  • A 2D drawing API used with the canvas element for rendering graphs or other visual images
  • An API caching mechanism that supports offline web applications
  • An API for playing video and audio used with video and audio elements
  • A history API that makes browsing history accessible and editable
  • A drag-and-drop API used with the draggable attribute
  • An editing API used with the contenteditable attribute

HTML API Resources

The following resources will help you brush up on your HTML skills and provide you with tips on designing your own API and an overview of how to use existing APIs so that you can learn by example and get inspired to create your own HTML API.

HTML APIs: What They Are And How To Design A Good One: This article published on Smashing Magazine gives a basic explanation of what HTML APIs are and essential guidelines to follow when designing your own API.

The Web API Checklist — 43 Things To Think About When Designing, Testing, and Releasing your API: While not strictly related to HTML5 API, this article written by Mathieu Fenniak contains a list of things that are easily missed when you set out to create your own API. His website also has other useful articles related to API design such as API versioning and how not to design fragile APIs.

APIUX:  whole blog dedicated the API user experience written by a team of people who “share the vision that APIs should be useful, easy to use and efficient”. You’ll find a plethora of articles on API user experience, in-depth look at popular APIs as well as expert interviews.

A vocabulary and associated APIs for HTML and XHTML: The W3C standard for HTML APIs covers every term under the sun that you need to know when it comes to API as well as on overview of APIs that are associated with HTML and XHTML.

Introduction to HTML5 Advanced APIs by Kevin M. Ruse: The book promises to beef up your HTML skills by introducing JavaScript implementation of the latest HTML APIs. Readers of the book should have previous knowledge of HTML and be familiar with JavaScript.

Sergey’s HTML5 & CSS3 Quick Reference: HTML5, CSS3 and APIs by Sergey Mavrody: If you need a reference guide, Sergey’s book summarizes the official HTML5 and CSS3 specification and covers the fundamental concepts which include HTML5 APIs as well.

The developer’s guide to the HTML5 APIs: In this article, Rich Clark from HTML5 Doctors discusses the purpose and development of existing HTML5 APIs and provides a list of resources to learn more about each one

10 HTML5 APIs Worth Looking Into: SitePoint’s article shows practical examples of using HTML5 APIs along with demos and a brief explanation of how the API works.

5 HTML5 APIs You Didn’t Know Existed: David Walsh exposes some of the smaller APIs that are useful none the less, includes short code snippets with the APIs in use and encourages readers to explore them.

HTML5 Geo-Location API And Google Maps API: This tutorial walks you through using the HTML5 Geolocation API in conjunction with Google Maps API to create a simple web app that request your location and then draws the best route to get there.

Use the HTML5 File API to Work with Files Locally in the Browser: In this tutorial, you’ll see a practical example of using the HTML5 File API to load an image to the browser, make simple edits to it, and then upload it once you’re done.

Wrapping Up

Building a web application or a mobile application is getting easier as web developers sees new technologies arise and establish themselves as viable solutions. Take advantage of using the resources above to brush up on your API knowledge, use them for your own projects, or to come up with your very own HTML API. Good luck!

Brenda Barron is a writer from southern California specializing in business and technology. Read more about what she’s up to on her site Digital Inkwell. More articles by Brenda Stokes Barron
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress