HTML is the acronym for HyperText Markup Language and it’s the main markup language for displaying the information from Internet in browsers. It was wrote in 1990 and since then it was upgraded 4 times, HTML5 being the latest and “brightest” addition.
By the time HTML4 was developed in 1997, a series of issues clouded the web experience. Due to the fact that most Internet pages have broken HTML markups and still generate issues when they are loaded in browsers (errors, such as forgetting some tags), the World Wide Web Consortium (W3C) has created XHTML (a different language, more specifically a reformulation of HTML4), which was supposed to deal with these errors.
Although in 2000 XHTML has become a W3C Recommendation, things didn’t look so good. Because XHTML treated as fatal all those errors that HTML passed away (the XHTML method was even named “Draconian error handling”), all web sites that contained errors (according to estimates, 99% of the sites) couldn’t run properly. This behavior has rapidly become very unpopular among web developers, and so in 2004, representatives from Mozilla Foundation, Opera Software and others were forced to find a solution. The silver lining appeared in 2008, and it was called the HTML5 standard.
What is different from previous versions?
HTML5 has video / audio native support
One of the main additions to HTML5 is the integrated support for video / audio. The idea is that a common video format will be rendered and played into the web browser, allowing users to play video / audio without any support from 3rd party software (like Adobe Flash). This comes as a relief, doesn’t it?
So far HTML5 has proven to be very popular for mobile platforms (especially because neither Apple nor Google Android 4.1 support Flash Player), and in some tops it ranks 3rd, behind iOS native apps and Android native apps. And that’s not all! It is expected that the number of HTML5-enabled phones to be sold by 2013 will reach 1 billion. This is mainly due to the fact that web apps built on HTML5 work on all browsers, and also it’s cheaper and less time consuming for developers to develop apps using the HyperText Markup Language.
HTML5 is more flexible
HTML5 does not handle the small errors from the code the way HTML4 did, but actually it uses a set of specific rules, thanks to which the testing process is a lot easier. Let me give you an example: when working with HTML4, developers needed to test their code in all the browsers in order to discover how the error handling of HTML4 affects their websites, as there were no specific rules in handling those errors. Now HTML5 provides new parsing rules, and thanks to that developers don’t need to do extensive testing on all the browsers, as they can rely on rules that apply to all browsers.
Since its first public working draft HTML5 has come a long way and has brought with it many improvements, as well as many new and very useful features. However, as any other new standard, it also has a downside. More about HTML5’s new features, but also disadvantages, in the next post (Part 2 of the series).
I’ve presented a short history of how HTML5 came to be and the most noticeable differences between the latest version of HTML and its predecessors, now it’s high time we discussed the bundle of new features that HTML5 comes with for the web.
So to keep things short, here are the HTML5 features for the web that I like and find very useful:
HTML5 Offline Web Applications
The HTML5 Offline Web Applications functionality allows the web browser to download the resources of the website and create a local copy of it, while the user is online. A list of URLs is then created (called a manifest file, which is in fact a simple text file), and from that list, the web browser will load all the saved resources of the website in case the user has no Internet connectivity.
Also, the local copies will be kept up to date by the web browser, as soon as the Internet connectivity is regained and there are spotted differences between the local and online content.
This method proves very useful especially for mobile devices, where the network connectivity can drop easily. So it’s definitely better to have limited access to the website than none at all, right?
HTML5 Geolocation functionality
Geolocation identifies the geographical location of an object in the real-world. This can be done using various ways, such as: IP address, wireless network connection or dedicated GPS that calculates the location using the information received from satellites. The geolocation API allows the user to share his location with trusted websites, and considering that most desktop and mobile browsers are supporting the geolocation API, this feature has a very large area of usability.
The awesome thing about HTML5 geolocation functionality is that the user doesn’t need to develop applications for particular devices, and he can create geolocation applications directly into the web browser.
This definitely saves a lot of time and effort dealing with compatibility issues.
HTML5 Web Storage functionality
Before talking about HTML5 web storage, let’s see what are the other methods of web storage available:
* First, there was the method provided by Microsoft in Internet Explorer – method that uses userData, a DHTML behavior that allows the web page to store into XML-based structure, up to 64 KB per domain.
* In 2002, Adobe introduced Local Shared Objects that allowed Flash to store 100 KB of data per domain.
* In 2007, Google launched Gears, a web browser plugin that can store, with the user’s permission of course, unlimited amounts of data in a SQL database tables.
All of the above options are reliant upon using a specific browser or a third party plugin, which may come as an inconvenient sometimes. On the other hand, HTML5 can be implemented in all browsers and doesn’t need any plugin to work, making it the best choice when talking about web storage.
Also, it’s important to know that the data stored using the HTML5 storage feature will persist after navigating away from the page, closing the tab, or after closing the web browser. Another awesome thing is that all modern web browsers support this, from Internet Explorer (that’s right, even IE!) to Android 2.0+.
Even more, the web storage method provided by HTML5 is faster and more secure than cookies (although the level of security is not significantly better). Also, large amounts of data can be stored (from 5 to 10 MB of data, which is huge, compared to the data that cookies can store) without affecting the performance of the website, providing the user with a good mix of speed and storage.
The feature set presented above is only a mere glimpse into the capabilities of HTML5. Because I truly believe that this markup languages represents the future of the web, I’ll give it one more try to point out its very best functionalities. And because I try to be fair & square, I’ve also underlined some disadvantages of HTML5. Enjoy!
HTML5 is more feature-rich
Thanks to the fact that Scalable Vector Graphics is part of HTML5, you can now play video games that are created and played in HTML5, without any 3rd party support. Also, using the Scalable Vector Graphics reduces the development time and doesn’t require the user to install other pieces of software.
New APIs
HTML5 comes with a new set of APIs for developing web applications, such as: canvas (used for 2D drawing), document editing, drag and drop implementation, web storage etc.. The new APIs cover the following areas:
* Commands that can be invoked
* Enabling offline Web apps (with an application cache)
* Form constraint validation – for example: setCustomValidity()
* Drag & drop (combined with a draggable attribute)
* Access to the session history and allows scripts to update the document’s URL without actually navigating
* Bidirectional client-server communication: WebSocket
* API for server-to-client data push: EventSource
* Base64 conversion – including btoa() and atob()
* Scheduling timer-based callbacks: setTimeout() and setInterval()
* API to prompt the user: alert(), confirm(), prompt(), showModalDialog()
* API for printing documents: print()
* API for handling search providers: AddSearchProvider() and IsSearchProviderInstalled()
* API for immediate-mode bitmap graphics: canvas used for 2D drawing
* API for cross-document messaging and channel messaging: postMessage() and MessageChannel
* API for running scripts in the background: Worker and SharedWorker
* API for storage on the client side: localStorage and sessionStorage
Disadvantages
Of course there are some disadvantages in using HTML5, but things are improving as we speak, such as: speed, security and compatibility with older browsers versions etc. The good news is that software development companies, which want to adopt this standard, are giving a hand in speeding up the process for improving the HTML5 standard. For example, AppMobi (a mobile app company) has announced a product that increases the speed of HTML5 video games by up to 500%. Impressive, right?
Overall, HTML 5 proves very valuable for handheld devices and this is the area where it shines the most. Considering that the mobile market is growing very fast and that the major software companies are adopting this standard, HTML 5 proves to be a big investment in the future of the WWW and in the quality of user experience.
