So far we have been talking about HTML4 (or HTML 4.01) as specified by the W3C. But, the latest kid in the town is HTML5! While this module is not focused on HTML5, we conclude it with a brief coverage of HTML5. Most of the browsers support most of the HTML5 features however none of them support HTML5 in entirety. Web-kit based browsers, like Safari and Chrome, are relatively more focused on HTML5.
This page provides a brief overview of HTML5. For this very reason, we do not add any code-examples to this page. We divide our discussion into two sections. The first one focuses on new HTML5 APIs and the second one focuses on new HTML elements/attributes. For additional details, we recommend the reader to visit W3C website for the latest HTML5 draft: http://www.w3.org/TR/html51/.
HTML5 has a much stronger integration with JavaScript and accordingly, offers several newer JavaScript APIs. These APIs provide a host of new functionalities like geolocation, offline storage, web workers, etc. We begin with a table that lists these APIs along with related details.
| Functionality | API Name | Description |
|---|---|---|
| Geolocation | navigator.getCurrentPosition() | Find user's location |
| Offline Storage | localStorage.setItem() | Store Data |
| Offline Storage | localStorage.getItem() | Get Stored Data |
| Offline Storage | localStorage.removeItem() | Clean Stored Data Cache |
| Web worker | worker() | Create a web worker object |
| Web worker | varWorker.postMessage() | Send a message to the worker object (in this case, varWorker) |
| Web worker | varWorker.terminate() | Close an existing web worker object (in this case, varWorker) |
With this HTML feature, visitors can choose to share their physical location with your web application. Since security is a key concern (given all the recent cyber-attacks!), HTML5 mandates that the web application should get an explicit confirmation from user before attempting to find out the user-location.
To find the current geographical coordinates of the user, HTML5 depends upon several underlying technologies like GPS, WiFi, Cell phone, or IP address. If a host is connected via WiFi, then HTML5 can use the WiFi location to find out the coordinates. If the user has no WiFi but is connected using a mobile device with cellular access (3G or 4G), then HTML5 can use triangulation based on distance from multiple nearby cell phone towers to find the location.
HTML5 provides JavaScript APIs for providing geolocation. To be more precise, it adds a new object, "geolocation" to the existing navigator object of the window object. So, the new object can be accessed as "navigator.geolocation". The geolocation object comes with a shiny new API: getCurrentPosition(). Thus, it is this API that returns the user location. The returned value is in the form of a coordinates that consists of latitude and longitude values.
Some of the exciting new features in HTML5 are strongly purposed towards mobile platforms. For example, HTML5's feature of client data storage is more useful on mobile devices that may be moving in and out of network coverage. If the content is cached on the client-side, then that mitigates some of the coverage disruption. While having the ability to storage application data is a great feature, care must be taken to ensure that sensitive data is handled appropriately.
The current HTML version (HTML 4 and before) allow us to store some amount of web-data in the form of cookies. With HTML5, this storage does a whole lot more! HTML 5 allows us to store a lot more data using key/value pair semantics. This can come in handy when we would like to build a mobile application such that we can store some application data when the device is connected to the Internet and use it when the mobile's connectivity goes away.
HTML5 comes with a new localStorage object as part of the window object (as window.localStorage). It is this localStorage object that holds the API for setting items (localStorage.setItem()), retrieving items (localStorage.getItem()), and removing items (localStorage.removeItem()). For more on web storage, please refer to W3C site: http://dev.w3.org/html5/webstorage/.
For pages that might be doing a lot of computation, HTML 5 provides yet another useful feature: web workers. HTML authors can use web workers to write pages such that a task takes a lot of time and interferes with normal page operation like DOM rendering, then that can be offloaded to a new worker. While the worker is busy with the time-consuming task, the main task with the main JavaScript can continue to do its thing like rendering the page.
Web workers do not get to access DOM. This is mainly needed to keep data in a sane state. If web workers were allowed to access and modify DOM, then we can have a case of multiple web workers modifying a DOM element at the same times. Also known as a race-condition, this can be a recipe for data-corruption. So, HTML5 plays it safe and does not give access to DOM data to the web workers. Pretty good design!
Once again, the web worker interface is provided as a set of JavaScript APIs. These API allow us to create web workers (worker()) and when done terminate (terminate()) them. For work to be done, HTML5 introduces a new method (postMessage()) for these workers. The main context uses this API to send tasks to the worker thread. The worker also uses the same API to send back its response! To know more about these (mighty!) workers, we refer the reader to the W3C site: http://dev.w3.org/html5/workers/.
With HTML5, we can embed audio and video files on our web pages without having to use any third-party plugins. To do so, HTML5 provides two new elements: <audio> and <video>. Both of these elements allow us to specify the source of the audio or the video file using the "src" attribute. HTML5 has also introduced a type attribute for both for these to specify the media type. For both audio and video files, the type attribute refers to the MIME type (Internet Media Type). For Audio files, the example values for type could be: type='audio/mpeg; codecs="mp3"', type='audio/mp4; codecs="m4a"', etc. For video files, the example values for type could be type='video/webm;codecs="vp8, vorbis", type='video/mp4;codecs="avc1.42E01E, mp4a.40.2", etc.
The above set of interfaces and APIs are not the only ones new in HTML5! HTML5 has also added several basic HTML elements. Let us start by listing some of these new elements in the following table.
| Element | Description |
|---|---|
| <section> | A generic piece of content or a application |
| <article> | A complete or self-contained composition |
| <header> | Introduction for a section |
| <footer> | Conclusion (or footer info) for the nearest section element |
| <time> | Machine-readable formatting for time |
| <progress> | To display progress of a task |
The <section> and <article> elements are similar, with the exception that the <article> should be a complete self-contained composition, where as the <section> element is usually a generic piece of content or application. The <header> element provides an introduction to the <section> or the <article> element. The header's counterpart, the <footer> element, provides conclusion to the <section> or the <article> elements. Both <header> and <footer> should be kept inside the <section> or the <article> elements.
We are not done yet! HTML5 also brings tons of improvements to HTML forms by adding newer attributes for the <input> element. We list a few of them below along with a brief description.
| <input> Attribute | Description |
|---|---|
| The input should be in the form of an email | |
| url | Expected format of a web page (address) |
| search | Input a search text |
| tel | For adding telephone numbers |
| date | Supports a date-picker that is inbuilt in the browser |
| time | Similar to date, the time-picker is inbuilt in the browser |
| color | Support for color-picker that is inbuilt in he browser |