HTML5 is the result of ironing out of differences between all major browser-vendors. As more browsers gear up to support many features of HTML5 – it may be a ripe time to switch over to HTML5.

html5-logo

Why switch to HTML5?

Why change if HTML5 is fully backward compatible with HTML4 ?

Here are the top 5 reasons why you should consider moving to the HTML5 markup.

a) New functionality: HTML5 adds a lot of new functionality to your arsenal. For instance, HTML5 supports many new form features, drag and drop elements and the ability to embed audio and video clips without the need for using bulky plugins.

b)Rich APIs: HTML5 comes with a rich set of associated APIs each solving a unique set of problems for web developers. The most notable APIs as of date include Canvas, Geolocation, Drag and Drop, Web Storage, ContentEditable, History, Web Workers and Microdata. Switching to HTML5 empowers the developer with all the goodies offered by these APIs. This is sheer power to the developers.

c) All Modern Browsers Support it: The adoption of HTML5 on desktop browsers is on the growth – all modern browsers support HTML5 in varied degrees. Internet Explorer 8 is an exception to this but there workarounds like the HTML Shiv, which solve this issue (see the workaround below).

d)Supported by All Major Mobile Devices: The adoption of HTML5 is much more rapid in mobile devices.

Today, nearly all smartphone and tablet device supports HTML5. Android and iOS devices (which equip the majority of handheld devices) have jumped into the HTML5 bandwagon.

In fact, any mobile device that uses WebKit browser(Notable being Chrome & Safari) has a fair amount of HTML5 support. (that covers Nokia, Samsung, Palm, Rim and others) And the adoption gets better every day.

With such a wide endorsement – HTML5 is sure the technology of the future.

As you can see, the best thing about designing web applications using HTML5 is that your creation will work on all major future devices.

e) Clean Easy Coding: HTML5 is easy to code and is less restrictive than XHTML4.  Closing tags are no longer required, it supports tags in all letter cases and attributes don’t need to have quotations around them.

With many new semantic tags introduced in HTML5, it is becoming a powerful tool at the hands of developers. At the same time, it is cleaner and more tolerant of markup deviations.

The Case against switching: IE7 and IE8

HTML5 is not supported by Internet Explorer 7 & 8 (RIP IE6). This is a valid enough reason for not switching to HTML5.

Between IE7 and IE8, Microsoft enjoys the largest segment of the browser market. Ignoring these two browsers is simply not an option. It is rightly argued that IE7 and IE8 are here to stay at least till 2015.

The IE7 and IE8 workaround

Fortunately you need not wait till 2015 to deploy HTML5 features and enjoy the new liberties. Simply download the workaround javascript by Remmy Sharp (called the HTMLShiv) and add the code snippet to the <head> of your documents like this:

1
2
3
4
5
<!—[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]—>

Caveat: While HTML5shiv script acquaints IE7 and 8 with the HTML5 tags, It does not add functionality to the tags. So, at best, you can use the script to degrade gracefully.

Degrading gracefully means that you design all your core functions in a technology that all browsers understand and design all the paraphernalia in HTML5. This way, your application will continue to function in older browsers while providing the best experience to the new updated browsers. Then, as your readers upgrade their browser, they can enjoy new features, without you having to do anything.

Moving to HTML5: Steps Involved

Switching over to HTML5 is just a matter of changing the doctype to <!doctype html>. Nothing else is required. The declaration can be in all lowercase, uppercase, or even in mixed case.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html lang=en>
<head>
<title>Your title here</title>
<meta charset=utf-8>
you meta tags go here
</head>

While you can move to the stricter XHTML5 doctype, I do not see any reasons for doing that. While HTML5 would tolerate errors, omissions and differences, XHTML5 won’t.

By sticking to simple HTML5 doctype, you can have support for both open tags(like <br>) or closed tags ( like <br />),support for attributes with or without quotation marks and in general a more tolerant browser behavior.

The HTML5 DOCTYPES declaration above uses the default lang=en language declaration. You can specify other languages. (Check out the language tags for other languages)

What’s with the New Semantic Tags?

HTML5 introduced some new semantic tags, the most notable ones being <article>,  <aside>, <figcaption>, <figure>, <footer>, <header>, <hgroup>, <nav> and <section>.

Semantic tags don’t do anything special by themselves. They provide hooks for CSS and can be used like any other top level css element. That said, they certainly allow for standardization and the possibility of them being put to more specific use by browsers of the next generation.

When switching from HTML4 to HTML5 you may choose to ignore them. But if you use them, beware that most of the browsers consider these tags as block level elements. Either design keeping this in mind or use a CSS reset like

1
2
3
4
5
article,  aside, figcaption, figure,
footer, header, hgroup, nav, section
{
display:inline;
}

Tags & Attributes that have become obsolete

Also, you should no longer use a few elements and attributes that have been declared obsolete in HTML5. The most notable deletions are:

  • Specifying name attribute on <a> tag has been deprecated, use ID tags instead.
  • Image width cannot be specified in percentages. You can still do that in your CSS file.
  • Frames are not supported in HTML5 – <frame>, <frameset>, and <noframes> have been removed.
  • Additionally the tags <center>, <tt>, <u>, <basefont>, <big>, <font> and <strike>have been removed because they are purely used for styling and the functions are better handled by CSS.
  • <applet> is now obsolete. Use <object> instead
  • <acronym>  tag replaced with <abbr>
  • <dir> tag has been removed. Use <ul> instead.
  • Not specifying a border image does not make the border 0. To do so you must specify the border=0 or better still include a css property like img{border: none;}
  • Specifying script language has been deprecated. Simply leave out specifying language like language=’javascript’ from the script tag.

Test…Test… Test!

When switching from HTML4 to HTML5, be sure to test you page appearance on IE 7 and IE8. Between the two, Microsoft hold the lion’s share of the browser market. Use online tools like Browsershots to test your page appearance on several browsers.

If your web app is meant only for mobile viewers, HTML5 should render perfectly well. Nevertheless you can test how your page renders on various Android and iOS powered devices.

And remember that HTML5 is still an evolving standard. If you are tracking the developments be sure to follow the W3C site. (www.w3.org/.)

Validate…Validate…Validate!

Even though HTML5 is fault tolerant, you sure do not want to be putting the wrong foot forward at the time of migration. When moving to HTML5, make validators your best friend.

HTML5 conformance checker is available at the W3C (http://validator.w3.org/).
Another validator worth checking is http://html5.validator.nu/.

Parting Thoughts:

HTML5 is no-one thing:

HTML5 is not one indivisible bundle of features. In fact the W3C standard includes at least nine separate areas within the HTML5 technology. A large section of the standards is still being written.

HTML5 is just a term that allows all these different standards to be referred together. To say that a browser is html compliant is to paint the wrong picture. You should be concerned about the one specific feature you want to include rather than worry over entire HTML5 support.

source: knowpapa