Differences between HTML 4 and HTML5

Today we take a few steps back and take a look at some of the differences between HTML 4 and HTML5.  This is intended to be a useful overview, not an exhaustive reference, but remember that things are still and always changing. We can’t deny the fact that HTML4 is the most successful markup language in the history of Internet ever. HTML5 builds on that revolutionary success. To start coding with HTML5, you don’t need to change the way you used to code in HTML4. With HTML5 you have new semantic elements, direct support for audio, video and a cool new canvas feature.

The first thing you should know is that, perhaps for the first time, the development of a language standard is acknowledging the real world. In order to keep file compatibility with the current standard - which is technically HTML 4.01 - the brave decision was made to separate the way the web browser renders files from the way we, as developers, must write them. 

So the browser, or “user agent”, must still process HTML4 constructs like the center element, because there will still be millions of files on the Internet that happen to use it. But we won’t be writing any more HTML with center; it’s simply being dropped from the language (use CSS instead). This compatibility goes both ways: older browsers can (and will) simply ignore HTML5 code without screwing things up.

The elements frame, frameset, and noframes are being removed from the language, as well as acronym, applet, basefont, big, blink, center , dir, font, isindex, strike , tt and u. All of these can be handled using CSS or other methods.

You’ll also have to learn to get along without using tables for layout; while tables themselves are still part of HTML5, they’re not intended for placing pixels any more. Here’s what the spec says:

"Tables must not be used as layout aids. Historically, some Web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results."

So all the attributes that let people create those perfectly laid-out, tinted tables are gone, like align, bgcolor, border, cellpadding, cellspacing, height, nowrap, rules, valign, and the big one: width.

Browsers of the future will become more powerful because of the move towards the cloud, so that they’ll be able to handle more on their own. We’ve already seen that with things like Ajax, and now with video/audio embedding and such, it will be far easier for us to code in a straightforward manner and let the browser figure out the details. For instance, new structure elements include article, aside, figcaption, figure, footer, header, hgroup, nav, section, and summary, all of which refer to the structure of the document itself and leave rendering to the browser.

Key Features 

• HTML4 was developed by World Wide Web consortium and WHATWG (web hypertext application technology working group) and HTML5 is being developed by web hypertext application technology working group (WHATWG) and W3C HTML WG. 

• HTML5 brings in new elements to structure the web pages as compared to HTML4 which uses common structures such as: – header, columns etc. These new elements are: header, nav, section, article, aside, and footer. 

• Now, each of these elements serves a unique purpose:-

Header denotes the inclusion of heading, sub headings etc. which is more specific.

Nav signifies both the website navigation as well as the navigation of the table of contents.

Section element corresponds to a broad category of a web page.

Article element symbolizes a particular section of web page such as: blog, news, testimonials etc.

Aside element is used to include the content that may relate to a specific section of a document or a web page.

Footer element is used to indicate important information like copyright data, the author’s name, links to other pages etc. 

• HTML5 brings a whole new dimension to web world. It can embed video on web-pages without using any special software like Flash. 
• Not only videos, HTML5 is said to be capable of playing video games on the browser itself. 
• HTML5 is considered to be flexible to handle inaccurate syntax. HTML5 specifies the rules related to the parsing and lexing as compared to HTML4. This means that even if there is an incorrect syntax, similar result is produced by various complaint browsers. 
•  Furthermore, HTML5 denotes to scripting of API (application programming interfaces) including new APIs like:-

ü  Drag and drop

ü  Database storage offline

ü  Editing of the document

ü  Canvas 2D APIs, etc. 

• HTML4 supports the ‘tag soup’ i.e. the ability to inscribe malformed code and get them accurately on the document. But there are no written rules or guidelines for doing this. This implies that malformed documents are to be tested on various browsers. To tackle this issue, HTML5 is being developed in such a way so that the developers need not waste their time and efforts in creating an error free web page. 
• Unlike its predecessor, HTML5 also includes many new tags and also new names for older tags with extra features like: local storage wherein a lot of information can be stored, JS-based hacks or Flash, validation form etc. so as to make the applications easy for the developers and speedier for the users.

Don't forget to leave your valid comments and suggestions below...

To View the previous Article about HTML 5

• Learning About HTML5