HTML5- Armed with A Complete Makeover!

admin on Jun 7th 2010 with 5 comments

Bloggers have been using this ongoing virtual battle between HTML5 and Flash, but to tell you the fact, they have their own place altogether. HTML5 is the new web standard. But have you ever wondered about the impressive applications, types, and elements to at least get an overview of the coming future.

You may be interested in following HTML5 article as well:
25+ Stunning Websites Using HTML5

What Is HTML5?

HTML5 is the newest specification for HTML, the standard programming language for describing the contents and appearance of Web pages. HTML 5 was adopted by the new HTML working group of the World Wide Web Consortium (W3C) in 2007. HTML5 introduces a number of new elements and attributes that reflect typical usage on modern Web sites. In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs). HTML5 also incorporates Web Forms 2.0, another WHATWG specification.

What was the Need?

HTML was developed by the W3C until 2004, when members of the HTML working group grew disturbed with the direction the W3C was going with HTML. HTML forms have been outdated and quite simplistic. One have had very limited options— the text field, the check box, the radio button, the text area and finally the select drop down. Any complex data like phone numbers, e-mail addresses or dates had to be checked by JavaScript. They felt that the W3C was not paying enough attention to the real-world development needs of the language and focusing too much on XML and XHTML. So they formed a new group called Web Hypertext Application Technology Working Group devoted to evolving the Web. They started by working on a new specification of HTML that is, HTML 5.

What’s New?

Under HTML5 umbrella, there are few exciting elements;

• an element to give you a drawing space in JavaScript on your Web pages. It can let you add images or graphs to tool tips or just create dynamic graphs on your Web pages, built on the fly.
• adds video to your Web pages.
• adds sound to your Web pages.

And if you start talking about the attributes, designed to aid in constraining the limits of a field, the list is plenty.

• List points to a data list element containing value suggestions.
• Max and min constrains valid date/time and number values.
• Pattern allows a regular expression as a constraint
  Placeholder displays a text hint for the field.

Not only this, but there are a lot of features that are developed just to help web developers.

• Context menus – HTML 5 supports the creation and use of context menus within Web pages and applications.
• provides details about an element. This would be like tool tips in non-Web applications.
• creates a table that is built from a database or other dynamic source.
• async attribute – This is added to the script tag to tell the browser that the script should be loaded asynchronously so that it doesn’t slow down the load and display of the rest of the page.

Forms that have undergone a complete makeover are search, tel, url, e-mail, date time, date, month, week, time, and date time-local, number, range, and colour.

The most interesting part is that these features get implemented into browsers. Mobile Safari (on the I-Phone) was quick out of the gate by adding support for number, e-mail and url. No validation is performed but special keyboards for each input type are presented to aid in entering a value.

HTML5 vs Flash

I personally don’t think that Flash is going to be replaced by HTML5. Flash has its own place on web. But still let’s see what others say:

‘Video expert Jan Ozer decided to put the most common claim—that Flash video is a CPU hog and that HTML5 will fix this problem—to the test, with a pretty simple methodology.’

Findings of the test—

From CPU Utilization Perspective: During video playback, the ability to access hardware acceleration is the single most important factor in the overall CPU load. Flash can easily access hardware acceleration, dropping the CPU requirements to just negligible. So if Flash can easily access the hardware acceleration on Mac(as it is easily able to access GPU acceleration), the CPU requirements for Flash playback and HTML5 playback can be narrowed. So, in this case, Flash is not bad.

Testing on browser— According to a set of comparisons from Jan Ozer of the Streaming Learning Center website, (though the test is not completely scientific) revealed that

• HTML5 clearly performed better than Flash 10 or 10.1 in Safari on a Mac.
• Although the differences were less clear cut in Google Chrome or Firefox.

Windows Test— Whereas Flash more than held its own on Windows, so

• Flash Player 10.1 was actually 58% more efficient than HTML5 in Google Chrome on the Windows system tested.
• On Firefox, Flash 10.1 dropped CPU utilization to 6% from 22% in Flash 10.0
• In IE8, Flash 10.0 used 22.41% CPU and Flash 10.1 used 14.62% CPU.
• Safari wouldn’t play HTML5 videos, so there was no way to test that.

The key to better flash performance is dependent on whether or not, it can access the hardware acceleration! In the case of Adobe, hardware acceleration is not supported under either Linux or Mac OS X, the latter because Mac OS X does not expose access to the required APIs.

Anyways this war will continue on and on. You may suggest your views on this. That would definitely help to put some light on the topic and probably could end this  discussion.

Hope you liked the post. Social bookmarking and comments are welcome as ever.