HTML5: Worth the Hype?
HTML5 has been getting more and more buzz as it is almost ready for launch. The Web Hypertext Application Technology Working Group (WHATWG) last month declared HTML5 in a “last call” phase. Since it has been around a decade for any real upgrade in HTML, it is no wonder computer programmers everywhere are eagerly awaiting its arrival.
Being edited by Ivan Hickson of Google, HTML5 was adapted to be the starting point for the World Wide Web Consortium (W3C) in 2007. The main purpose for creating HTML5 is to minimize the use for, “plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight, Apache Pivot and Sun JavaFX.”
The W3C drew up the first draft of HTML5 for public use in January of 2008, and are to be finished and implement the code into browsers before whole specifications reach final status. Hickson expects the W3C to reach these specifications sometime this year and will reach the final product of HTML5 by 2022 or later.
You may be interested in the following related articles as well.
Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.
Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.
What is HTML5
HTML5 is being developed as the next major revision of HTML (HyperText Markup Language), the core markup language of the World Wide Web. HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight, Apache Pivot, and Sun JavaFX.
HTML5 Overview
HTML5 brings many new features to the table as well as updates already in use HTML code. To use HTML5 you will need to use a specific scripting API such as:
- DOM (document object model—which is already used for previous versions of HTML)
- The canvas element for immediate mode 2D drawing
- Timed media playback
- Offline storage database
- Document editing
- Drag-and-drop
- Cross-document messaging
- Browser history management
- MIME type and protocol handler registration
Browsers that will support HTML5 will now become more flexible in handling any incorrect syntax. Another great thing about the switch to HTML5 is that older browsers that do not yet support HTML5 will be able to ignore the code.
Markup Changes
HTML5 introduces a number of new elements and attributes that reflect typical usage on modern Web sites. Some of them are semantic replacements for common uses of generic block (<div>) and inline (<span>) elements, for example <nav> (website navigation block) and <footer> (usually refer to bottom of web page or to last lines of html code). Other elements provide new functionality through a standardized interface, such as the <audio> and <video> elements.
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 in Web behavior.
The HTML5 syntax is no longer based on SGML despite the similarity of its markup. It has, however, been designed to be backward compatible with common parsing of older versions of HTML. It comes with a new introductory line that looks like an SGML document type declaration, <!DOCTYPE html>, which enables standards-compliant rendering in all browsers that use “DOCTYPE sniffin'”.
HTML5 brings many new tags you may not be familiar with, Following are the new tags which is introduced:
- <article> tag defines an article
- <aside> tag defines content aside from the page content
- <audio> tag defines sound content
- <canvas> tag defines graphics
- <command> tag defines a command button
- <datalist> tag defines a dropdown list
- <details> tag defines details of an element
- <dialog> tag defines a dialog (conversation)
- <embed> tag defines external interactive content or plugin
- <figure> tag defines a group of media content, and their caption
- <footer> tag defines a footer for a section or page
- <header> tag defines a header for a section or page
- <hgroup> tag defines information about a section in a document
- <keygen> tag defines a generated key in a form
- <mark> tag defines marked text
- <meter> tag defines measurement within a predefined range
- <nav> tag defines navigation links
- <output> tag defines some types of output
- <progress> tag defines progress of a task of any kind
- <rp> tag is used in ruby annotations to define what to show browsers that do not support the ruby element.
- <rt> tag defines explanation to ruby annotations.
- <ruby> tag defines ruby annotations.
- <section> tag defines a section
- <source> tag defines media resources
- <time> tag defines a date/time
- <video> tag defines a video
Although these tags may need some getting used to, they will hopefully allow for better loading time as well as making it easier for search engines to crawl your site—making it easier to find quality information.
For example, to point out to search engines the most important information on your site you would want to use the <article> tag. The <header> tag will also allow you to point out the primary information about the content following the tag, and can be used more than one in a page. This will allow you to have different sections in a page with their own header.
One of the most talked about tags is the <video> tag. This tag will allow developers to imbed video without the use of plug-ins like Flash—which will free up loading time for your visitors.
Geolocation support will also be a great feature to HTML5. Browsers are making the switch now to allow developers to put in their locations on their websites’. This will be important for your clients that are targeting Google local search.
Because not all browsers support the geolocation API, you need to first find out if this is an option for you. “If your browser supports the geolocation API, there will be a geolocation property on the global navigator object. If your browser doesn’t support the geolocation API, the geolocation property will be undefined. ”
How HTML5 Operates with Popular Technologies
The online world has gotten used to certain software programs and API’s to build great websites. HTML5 brings many new advantages and disadvantages to the table for developers and programmers. As mentioned above, HTML5’s new tags bring new features never before used.
HTML5 Vs. Flash
This is a much heated debate and should be looked into in depth. We all know Flash has gotten a bad rap over the years with certain web designers because of the possible slowing down of loading time. HTML5 could be the silver lining in all of this.
With HTML5 being in its infancy stages and Flash going on 10 years old, it seems a little unfair to be comparing the two, but nonetheless it is an issue everyone seems to be concerned about.
Another concern is that Mac users will benefit more from HTML5 than PC users since Flash isn’t supported by Apple. There have been many tests run on this subject, and below is a portion of a test run by Mike Chambers that portrays the amount of CPU used within each browser. He has tested each CPU time in both Mac and Windows environments.
Chambers general findings seem to state that it is more important what browser you are running your videos in than which computer, although Macs did seem to come out on the slower end of the spectrum more times than not.
It seems for now flash will be better when it comes to video games, but depending on your browser, and if you are running a less intricate video HTML5 format, could be a better choice.
The main point programmers should take away from these studies and debates is that there is another choice out there now. Flash has had its stronghold in the market for quite a while. When developing a client’s page, do some research and decide how their target audience is viewing their site.
If it is coming down to what browser works best, then use that data to help decide which configuration will work for that site. Also take into consideration mobile browsers, which may be a better fit for HTML5 as well.
HTML5 with IE 9
IE 9 boasts more than its HTML5 compatibility, but will be a great browser to run HTML5 sites because IE 9 “uses Windows’ modern graphics API’s and the PC’s hardware to accelerate all the graphics and text that browser draws on a screen. ”
At the Mix conference in March, Microsoft also announced that IE will support a new SVG support—coined GPU-Powered HTML5. This support will be able to “improve actions such as scrolling or viewing 3D graphics by handing over processing to the graphics card. The preview uses Direct2D for this support, which means it requires Vista SP2, Windows 2008, or Windows 7. ”
HTML5 with Ajax
One of the biggest problems the current HTML code faces for web design companies that like to use Ajax applications online is the current HTML doesn’t quite do the trick. According to Ajaxwith.com, “HTML provides a lightweight interface in the application. HTML could be used to load the interface of the application while JavaScript could be called to launch the specific functions. Although other languages could still be applied to JavaScript to build an Ajax based application, HTML has made a distinction because of the inherent familiarity to most developers. ”
The good news is HTML5 will allow Ajax and other client side programming languages to improve—“the use of powerful functions such as iFrame and data transmission formats such as XHTML could be easily implemented with the assistance of HTML 5. ”
HTML5 with CSS
When it comes to your CSS codes you may need to do a little house cleaning to become HTML5 compliant. Because the tags <h1>, <h2> etc, will no longer be in use, you should consider finding a CSS reset program. For the most part you will only need to reset the most frequently used tags. According to woork, “One of the most popular files for CSS reset is the Eric Meyers CSS reset. ”
HTML5 Pros and Cons
The reason mobile may be favored by HTML5 is that one of the major heavy hitters in the Smartphone world is the iPhone, which we all know does not support Flash. This may be a major factor when building mobile friendly web pages. HTML5 will also allow all Smartphone browsers to load faster—a plus for both sides of the spectrum developers and users.
Another reason HTML5 may be better for your client is more on the SEO end of the spectrum. Google announced April 9th that they have added site speed into their algorithm. If your client is trying to build a SEO friendly site, you should take into consideration if Flash would slow their site down.
Like with any new release in the digital world, whether it is a device or new code, there are going to be issues you need to be aware of. One of the main complaints web graphic designers may run into is the lack of microformats across multiple browsers due to all of the new tags.
Until HTML5 is more widely used, we cannot fully understand all of the pros and cons associated with the new code. It seems overall this will be a great change for developers and a tossup for graphic designers. Until all browsers and electronic devices support HTML5 more collectively we may not be able to get a grip on the improvements.
Further References
- HTML5 | From Wikipedia, the free encyclopedia
- Web Hypertext Application Technology Working Group | Whatwg.org
- What SEOs Ought to Know About HTML 5 | SEO-Scoop
- HTML5 – New Old Semantics | TemplateMonster
- Detecting HTML5 Features | Diveintohtml5
- IE9 Platform Preview | Msdn.com
- Microsoft’s Internet Explorer 9 embraces | TheRegister
- HTML 5 and Ajax | AjaxWith
- CSS code structure for HTML 5 | Woork
Image Credits
Interesting article, but your charts for HTML5 vs Flash seem to be missing the HTML5 chart listed on link
You only only showing the Flash charts.
Thanks for the info!
I’ve started using HTML5 in t he form it is available today (enabled via some .js and .css to handle the new elements mostly) and it’s been great. I can’t say about advanced features such as video and canvas because I have not had a chance yet to use them in a production environment, but the impatc of HTML5 on the basic stuff has been very positive.
Of course, we must wait for the browsers to really catch up, and by the time they will, we will be looking at the next wave of change, but it seems a step in the right direction.
This is an excellent list! Some very useful techniques.
Excellent article. Bookmarked and saved as a reference to include in my upcoming article!
A very nicely explained article .. Waiting for HTML 5 .. it will change the web surely :) ..
“final product of HTML5 by 2022 or later.” 2022?? Should that be 2012?
I find it very important function of geolocation. Even when the ‘HTML 5 “will be released officially, however, before we start to use it on their websites, it is better to wait a bit’ of time before then that all users leave the old browser and begin to adopt it.
HTML5, whilst still in specification mode, will only improve the way we write and present web pages and applications. The addition of elements such as the new types is a huge improvement on the current set of elements.
It’s now just wait for browsers to catch up and for users to stop using ancient browsers.
Very interesting article indeed. I think it will change a lot of things, for the better. I am sure there will be some people who are not going to enjoy the change. But change is good and important. I always tell myself that web will always and forever be improving and upgrading. So I must adapt myself! Great article and thanks!
Very useful and interesting content. Thanks!
I keep reading how HTML5 will be final in the year 2022. Can someone explain why it takes from 2008-2022 to get things finalized…?
It seems like there is still a lot to work on before HTML5 is released. Hope to see it out soon :)
Worth the Hype..!!!
Helpful, thank you for your explanation, I would like to quote your article, can I?
Looks like the tag is yet another nail in the coffin for Flash technology? I personally can’t wait to see Flash phased out for good.
Great article Shannon. I am about to start with HTML5 and need some good references. :)
Thanks, good work.
It is really very unique and prolific information has been provided on this article. Thanks for sharing.
WOW!!,HTML is very powreful.
Hi there,
Nice one Shannon, It would only be fare to give the change to evolve and see where it goes. Looking forward to some interesting sites built.
Cheers,
Eddie
Thanks.
I will save this for future reference, since it will very useful for translating.
Natalia
i see that html 5 will be big evolution in web coding industry :) but the question when is necessary to learn it ? i see that big major of browser till now have no support for html 5 !!
Good post. I think I may play around with it in Safari 5 to get an early feel for it.
I just played with an application built in HTML 5 (DeviantArt’s Muro) and I must say, it was exactly like a Flash app.
@Theotherside: You’re right; HTML 5 isn’t anything but a markup language. However, its built-in XML-based code consistency makes it work much better with Javascript and CSS3. The strict standards of HTML 5 means greater control with Javascript and CSS3 – that’s why HTML 5 is so great.
Actually i have been wondering why people is so excited about html5? I mean it just mark-up language, without javascript and css it will lose its interactivity, so its kinda meaningless.
Ok there is local storage, video playback capability, and editable content capability…but for what? will you use that your project? videoplayback still requires codec installed on your machine, editable content will not change the content in database without php or other programming language.
So i suppose what deserve more hype is javascript, and css3. because without them, the web will be dull and plain, but without html5? i believe the web will still grow without it.
just my 2 cents
This is a really great overview of HTML5. I might try it out and see what I think first hand. Thanks for sharing.
I use html 5 and have loved the additions. It makes things, couple with css3, a lot simpler.
HTML has changed the game on markup and speed, soon I am sure it will start to phase out it’s predecessors.
I like the html 5. I use it with CSS3 and it makes things quick and easy.
I like the additions to html 5 and I just hope that Internet Explorer keeps up with the changes and doesn’t make life difficult for us web developers.
It was a nice artical… I am a flex developer and i wanted to jump into HTML5 Technologies.
How can i start from 0TH position.