During my coop term at OICR, I had experience investigating the new technologies in HTML5. This article summarizes the aspects that I discovered.

  1. New APIs
    • drag and drop
    • Canvas
    • Audio and Video tag
  2. Semantic Web
    • New input tags
    • Sectioning
  3. Local Storage

New APIs

Drag and Drop

The HTML4 way:

Before, we had to use a “choose file” popup to prompt users for files.

The HTML5 Way:

It is a lot eaiser to upload files with the Drag and Drop API - you just drag and drop it from your local disk. It is known that Googld Drive, Dropbox and many other services have adopted this technology.

Drop files here


Canvas

Canvas is my favourite technology by far - it’s highly customizable, easy to learn and has better performance.

A canvas is very simple on its HTML, like this:

<canvas id="myCanvas"></canvas>

… and that’s it! Its behavious is fully controled by JavaScript.

Here is a demo on canvas:




Canvas supports hardware acceleration, meaning it takes advantage of the computing power of the GPU in your computer, resulting in much better performance when dealing with heavy graphic canvases.

Examples of heavy-graphics canvas:

Native Video and Audio Support

HTML5 natively supports playing videos and auddios - meaning by the time it’s fully adopted, you can finally throw away your third-party plugins like Flash/Quicktime/Silverlight/etc - which are prone to causing heat and wasting resources.

You can easily embed a video in your webpage like this:

<video width="640" height="480" controls>
   <source src="files/myVideo.mp4" type="video/mp4">
   <source src="files/myVideo.ogg" type="video/ogg">
   Your browser does not support the video tag
</video>

Your browser will choose the first child node that it understands (based on the type - maybe the last line - it always understands text), download it, and display it right away.

Semantic Web

New input tags

HTML5 introduces many new input tags which aim to address cross browser compatibility issues as well as adding optimizations and features. Note that not all browsers have fully adopted all these new tags, therefore it’s best to view them in Chrome. Here is a list of my favourites:

<input type="email" name="email">
<!--
Try inputing something that's not a valid email!
-->
Email address: 


<input type="number" name="lucky" min="1" max="100">
<!--
Try inputing something that's not a number / not within the range!
Also observe what Chrome has done on the right side of the input area!
-->
Input your lucky number: 


<input type="color" name="favcolor">
<!--
Wow! This brings up the system-native color picker!
-->
Choose your favorite color: 


<input type="date" name="bday">
<!--
In chrome, this brings up a calendar!
Also, in iOS/Android, this also brings up the native date picker
-->
Input your birthday:

Sectioning

In HTML4, we use <div></div> for everything. Some divs are for structuring purposes (e.g., section, subsection), while other divs are for theming purposes (e.g, a wrapper div).

The introduction to sectioning tags in HTML5 solves the problem. The <section> tag, <aside> tag, <article tag,, <nav> tag, etc are always used for structuring purposes. This helps developers think of the roles of contents, and produce more high-quality internet.

The HTML4 tags:

<div class="section" id="forest-elephants">
   <h1>Forest elephants</h1>
   <p>In this section, we discuss the lesser known forest elephants.</p>
   <div class="subsection" id="forest-habitat">
      <h2>Habitat</h2>
      <p>Forest elephants do not live in trees but among them.</p>
   </div>
   <div class="ads" id="ad1">
      some ads
   </div>
</div>

The HTML5 tags:

<section>
   <h1>Forest elephants</h1>    
   <p>In this section, we discuss the lesser known forest elephants. 
   <section>
      <h2>Habitat</h2>  
      <p>Forest elephants do not live in trees but among them.
   </section>
   <aside>
      some ads
   </aside>
</section>

It is also beneficial that these semantic tags serve machines more convieniently - think about how a screen reader for accecibility-aquired users would parse the DOM, or how AdBlock analyzes which piece of content is more likely an ad.

Local Storage

Local Storage is so fun!!

Here’s a demo - try typing something in both boxes and refresh or close the browser tab or quit the entire browser, and reopen - then see the magic!

As the name suggests, local storage stores your data locally, in your browser. It’s not sent to the server (like cookies), and it has bigger space for storing data.

This basically is how Google Docs work - with some code to sync your data to the server when it needs to, you can make a web app that can work offline. Imagine you are at an airport and you don’t have Internet access - work on your docs as usual, and you’ll be able to sync it to the server when you’re online.

Conclusion

HTML5 is so powerful.

HTML5 was announced official and complete on October, 2014 on the HTML5DevConf conference. To contrast, HTML4 was standardized in 1997.

42% of 10,000 developers surveyed by 2014 Vision Mobile is already using HTML5 to build apps - before it was even official.

One of the promises of HTML5 is to lowering the cost of developing powerful, cross-platform applications. The theme is “Write once, deploy anywhere”.