HTML IN-DEPTH

HTML APIs in Depth

HTML5 has a set of APIs that provide a scripting interface for some of the features of the language.

Anisha Swain
Aug 17, 2020 · 7 min read
Image for post
Image for post

Are you a person who just started with HTML/CSS or someone who wants to have an in-depth knowledge of the advanced features of HTML? Then you are in the right place. So grab a cup of coffee and enjoy the first part of our HTML series, HTML APIs in Depth.

A few days before, I came across an article by Lea Verou, where she wrote about the design of HTML APIs and how we might write better documentation for web designers. There she pointed out a crucial aspect of our perception. She says:

When beginners of HTML/CSS struggle to write code in JavaScript, that’s where HTML5 APIs come to their rescue. HTML APIs are a collection of JS libraries which can be used directly in HTML files without incorporating any customize JavaScript code

So in addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs) that can be used along with JavaScript.

This technique helps us perform tasks in the web browser and supported mobile devices that were not possible in previous versions of HTML.

Why HTML APIs

Now, many advanced JavaScript might question the need for such APIs. But these APIs not only benefit people with limited JavaScript skills but also help programmers save time by using simple APIs for tedious tasks. It makes the process more flexible for programming

What is API?

According to Wikipedia:

“An application programming interface (API) is a computing interface which defines interactions between multiple software intermediaries. It defines the kinds of calls or requests that can be made, how to make them, the data formats that should be used, the conventions to follow, etc.”

In a typical HTML API, the calls and requests along with definitions and protocols are written and invoked with HTML itself. HTML API uses certain class or attribute patterns used in the HTML element to invoke the functions in the API.

Lists of HTML APIs

  • The canvas element for immediate mode 2D drawing.
  • Timed media playback
  • Offline Web Applications
  • Document editing
  • Drag-and-drop
  • Cross-document messaging
  • Browser history management
  • MIME-type and protocol handler registration
  • Microdata
  • Web Storage, a key-value pair storage framework that provides behaviour similar to cookies but with larger storage capacity and improved API.
  • Web Workers
  • Geolocation — get the latitude and longitude of the user’s browser
  • File — get file information from local files selected via file input, or drag and drop
  • History — add or remove URLs in the browser’s history stack — useful in single-page apps
  • Audio API
  • Video API

Some more commonly used HTML APIs would be:

Know more about such APIs here.

HTML APIs are also capable of creating responsive reusable layouts with Web Components which work similar way as APIs.

For example the components like:

  • <dialog>: Display a popup or modal window without the overheads
  • <details> & <Summary>: Show/hide content under a collapsible heading without using JS
  • <picture>: To add responsive pictures which respond to different viewports and serve specialised content
  • <input>: to give instant feedback on form

These components can be used in any HTML file without copying the whole HTML file. Let’s know a little bit more about them.

Web Component and HTML API?

Image for post
Image for post

Web Components allow the developer to divide the HTML website into chunks of reusable customized code. These customized codes can be used in any part of the whole project without the requirement of copying the whole HTML file. It will help developers to write more modular code.

Building a Web Component uses four different specifications in the browser to construct, configure and generate their internal workings.

HTML templates
HTML structure elements are often repeated to make sure each one works the same as the last. Instead, to save some time and reduce errors, we can also make a function to generate HTML for an element, adjusting the contents as they go. HTML templates bring that ability natively to browsers through use of the <template> element. The contents of a template stay inert and invisible, but JavaScript can access it like regular content without issue.

Know more here

Custom elements
The most important feature of web components is the use of custom elements. As the name suggests, it helps the developer to create their own custom elements. They can also possess their own scripted behaviour and CSS styling.

More info here

The Shadow DOM
The Document Object Model(DOM)represents each page as a set of connected elements. The shadow DOM is a hidden subset of further connections within a specific element of that DOM. Nothing inside the shadow DOM can affect anything outside. For example, a page may have an <video> element in its DOM, but the shadow DOM inside <video> houses the internal controls such as the play button and volume slider.

Know more here

HTML Imports

HTML Imports allows the developer to import another HTML making the programmers’ life easier.

We can import HTML file by using <link> tag:

<link rel=”import” href=”main.html”>

Find more HTML APIS:

A simple HTML API Example:

Let’s create a syntax highlighting API for HTML code. We will write the JavaScript file in such a way that we won’t have to use any JavaScript code in the HTML. Plus the JS file will be reusable for multiple HTML files as well.

App/main.js

var para = document.querySelectorAll(“[class^=highlight-]”)
var btn = document.querySelectorAll(“[class^=highlight-button-]”)
btn[0].onclick = function(){ highlight();}function highlight(){
for(var i=0; i<para.length;i+=1){
var highlightColour = para[i].getAttribute(“data-color”);
para[i].style.color=highlightColour;
}
}

Now, in JS file we are assuming every class getting started with “highlight-***” to be a class to be highlighted and the colour of the highlight is be passed through “data-* “ attribute.

So to include the same in HTML:

App/index.html

<!DOCTYPE html>
<html>
<style>
body{
margin: 160px;
text-align: justify;
}
p{
font-size: 24px;
}
</style>
<body>
<button class="highlight-button-1">Highlight</button>
<h1>Syntax Highlighting</h1>
<p class="highlight-para1" data-color="green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur laoreet dui ac scelerisque.</p> <p class="highlight-para2" data-color="red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur laoreet dui ac scelerisque.</p></body>//adding API to the HTML file
<script src="./main.js"></script>
</html>

You, see any element with the class name “highlight-***” is by default being treated as an element for being highlighted. It doesn’t need any other settings or style customization. Here the main.js file is working as an HTML API.

Image for post
Image for post

Now, this was an elementary example. We can also provide various settings with “data-*” attribute for more styling and customization. Like this many APIs are built to provide more and more features to HTML elements. For example BootStrap, it provides both JS and CSS files to be added in HTML without the requirement of any customization.

Things to keep in mind while designing an HTML API:

  1. Always try to use auto-initialize selectors for HTML elements
  2. The selectors need to be implicit
  3. A good practice is to allow these options to be used via either HTML or JavaScript, to accommodate both types of library users.
  4. Minimize Markup requirements. It’s a good idea to provide flexibility but writing too much markup is also annoying.
  5. Follow the conventions of HTML as much as possible
  6. It’s OK if not every single setting is available via HTML. The settings can also bet
  7. It’s good to have settings that can be inherited from ancestor elements if not from the exact elements
  8. Global Setting: the system should have two groups of settings: settings that customize how each instance of the widget behaves, and global settings that customize how the library behaves.

Resource:

  1. https://www.smashingmagazine.com/2017/02/designing-html-apis/
  2. https://www.admecindia.co.in/web-design/what-are-html5-apis-and-where-you-can-use-them/#
  3. https://www.agitraining.com/html5/tutorials/html5-api-overview
  4. https://www.creativebloq.com/features/best-html-apis

So that’s it for this article. I hope you all liked it and if you liked it then do not forget to tell us your thoughts in the comment section below.

If you want to connect with me, here I am at Twitter or Instagram

Follow our community LinkedIn group, Facebook Page and Twitter for more such articles and posts and meet like-minded people to collaborate.

Coffee with the UI girl

A collection of articles for User Experience Design Research and Design

Anisha Swain

Written by

ASC @Red Hat,GHCI18 Scholar,Open Source Contributor, Computer Vision and Deep learning enthusiast. contact:https://twitter.com/anishaswain

Coffee with the UI girl

This is a collection of articles to help understand User Experience Research, Design Principles and Interface Implementation methodologies in a Human Centered way.

Anisha Swain

Written by

ASC @Red Hat,GHCI18 Scholar,Open Source Contributor, Computer Vision and Deep learning enthusiast. contact:https://twitter.com/anishaswain

Coffee with the UI girl

This is a collection of articles to help understand User Experience Research, Design Principles and Interface Implementation methodologies in a Human Centered way.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store