HTML 5 — Future of the Web

What is HTML 5

Over the past ten years or so, concepts such as Web 2.0, Rich Internet Applications (RIAs), and the Semantic Web have all pushed HTML, CSS, and JavaScript to and beyond their limits, often relying on plug-ins such as Adobe Flash to power components such as video and audio, as well as highly graphical and interactive applications. The Adobe Flex development framework, Microsoft's Silverlight platform, and JavaFX have all looked to provide support where HTML's weaknesses made developers' lives difficult.

With HTML5, however, the markup language is striking back, with full multimedia support, local storage and offline application support, a native 2D drawing API, and a host of new application development APIs, all provided with the intent of proving that HTML, CSS, and JavaScript can provide a rich front end to your Web sites and applications.

HTML5 New Elements

HTML5 introduces a number of new elements and attributes that reflect typical usage on modern websites. Some of them are semantic replacements for common uses of generic block (<div>) and inline (<span>) elements, for example <nav> (website navigation block), <footer> (usually referring to bottom of web page or to last lines of HTML code), or <audio> and <video> instead of <object>. Some deprecated elements from HTML 4.01 have been dropped, including purely presentational elements such as <font> and <center>, whose effects are achieved using Cascading Style Sheets. There is also a renewed emphasis on the importance of DOM scripting (e.g., JavaScript) in Web behavior.

The main semantic elements that HTML5 introduces are:

<header>This element is used to define a header for some part of a Web page, be it the entire page, an <article> element, or a <section> element.

<footer>Like the <header> element, this new element defines a footer for some part of a page. A footer does not have to be included at the end of a page, article, or section, but it typically does.

<nav>This is a container for the primary navigation links on a Web page. This element is not intended for use with all groups of links and should be used for major navigation blocks only. If you have a <footer> element that contains navigation links, you do not need to wrap these links in a <nav> element, since the <footer> element will suffice on its own.

<article>The <article> element is used to define an independent item on the page that can be distributed on its own, such as a news item, blog post, or comment. Such items are typically syndicated using RSS feeds.

<section>This element represents a section of a document or application, such as a chapter or a section of an article or tutorial. For example, the section you are reading now could be surrounded by a <section> element in HTML5. <section> elements typically have a header, although it is not strictly required. The header for the section you are reading now would contain the text "Semantic elements," for example.

<aside>This new element can be used to mark up a sidebar or some other content that is considered somewhat separate to the content around it. An example of this might be advertising blocks.

Playing <video> and <audio>

In recent years, the popularity of video sharing sites such as YouTube and content delivery platforms like Hulu has seen a huge explosion in the use of the Web for multimedia streaming. Unfortunately, the Web was not built with such content in mind, and as a result, the provision of video and audio has by and large been facilitated by the Flash Video (.flv) file format and the Adobe Flash platform.

HTML5, however, includes support for two new elements, <audio> and <video>, which allow Web developers to include multimedia content without relying on the user to have additional browser plug-ins installed. Several browsers, including Mozilla Firefox, Apple Safari, and Google Chrome, have begun supporting these new elements and providing standard browser playback controls, should the user choose to use them. In addition, a set of standard JavaScript APIs has been provided to allow developers to create their own playback controls, should they wish to do so. A key advantage to native multimedia playback is that it theoretically requires less CPU resources, which can lead to energy savings.

Browser Compatibility

You may not realise it but you are probably already using a browser that is compatible with HTML 5. It is estimated that about half of all Internet users are already using browsers which are ready for HTML 5. Firefox (version 3.6 and higher), Chrome, Safari, Opera and IE 9 are the most popular of these HTML 5-compatible browsers, though the support is partial at this stage.

HTML 5 was developed give developers more flexibility, do more things in-house and enable more exiting and interactive websites and more powerful and efficient applications. It brings HTML up to date in terms of what developers have been struggling to do with HTML4 via plugins etc., including managing data, drawing, video and audio, and to provide websites that deliver what the users want better and faster. It will eventually make it easier for developers to develop cross-browser applications for the Web and portable devices.

Mobile Compatibility

Apple contributed significantly to the growth of HTML5—first by refusing to let its iOS devices support Adobe Flash, then by launching its own rich-media mobile ad network, iAd. However, HTML5 is an open standard, and it will do for mobile what Flash did for online.

HTML5 is a critical step for mobile web application development. Some of the key elements that it provides are:

  • Offline Support — The AppCache and Database make it possible for mobile developers to store thing locally on the device and now that interruptions in connectivity will not affect the ability for someone to get their work done.
  • Canvas and Video — These two features are designed to make it easy to add graphics and video to a page without worrying about plugins. When supported by the phone's hardware, as is the case with the iPhone, they provide a powerful ways to get media into a page.
  • GeoLocation API — This is actually not part of HTML5, but is a separate specification. That said, it is often bundled together because the mobile phones that are including HTML5 are generally supporting the GeoLocation API.
  • Advanced Forms — Even simple things like the improvements in HTML5 for forms could make life easier for mobile applications. Fields that can be validated by the browser are improvements for mobile devices. The more that can be handled by the browser means less time downloading javascript code and less round trips to the server if validation can be found before the form is posted.

Most importantly, nearly all of the hybrid applications frameworks—Phone Gap, QuickConnect, RhoMobile, Titanium Mobile, and others—rely on HTML5 features to provide a rich application experience. For these reasons and many more, We believe the adoption of HTML5 will be driven by the needs of mobile, not the needs of desktop developers.

Product Link
Recommend & Popular
video to flv encoder
Related Products
Special Offers
Related Tags
  • Enter your email to subscribe our monthly Sothinkzine!
  • newsletter