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

Learning About HTML5

HTML5, depending on who you listen to, may be either a disruptive new technology that has the potential to bring entire companies to their knees, or a smooth transition from current HTML 4.0 that promises to make life much easier for developers. Both are at least partially true, and in this continuing series, I hope to help you make sense out of HTML5: both business sense and nuts-and-bolts coding-level sense.   

HTML5, depending on who you listen to, may be either a disruptive new technology that has the potential to bring entire companies to their knees, or a smooth transition from current HTML 4.0 that promises to make life much easier for developers. Both are at least partially true, and in this 

continuing series, I hope to help you make sense out of HTML5: both business sense and nuts-and-bolts coding-level sense.   

Perhaps the most important thing to understand about HTML5 is not the coding details and changes themselves, but the high-level functions they give you access to. In fact, HTML5 is all about high-level functions rather than details. For instance, instead of thinking of multimedia objects and then defining them as video or audio and so on, in HTML5 you can simply write something like: 

<video src=”watchthis.mp4” width=”640” 

height=”480”> 

  < a href=”watchthis.mp4”>Here’s my video</a> 

</video>

This functional methodology extends even to typical page coding. We’re all used to writing complex pages in terms of low-level objects like </div>, which is kind of amorphous and easy to lose track of. So we often attempt to keep track of things by coding like this:

<div id=”header”>

<H1>Learning About
HTML5</H1>
<p class=”credit”>by David Fiedler</p>
</div>

In HTML5, we can cut right to the chase. We’re writing a header, and now we can code it that way:

<header>
<H1>Web Developer Basics: Learning About
HTML5</H1>
<p class=”credit”>by David Fiedler</p>
</header>

So what, you might say at this point. Well, it’s not just the header of a page that we can now view as a complete functional object, it’s almost everything we use on a daily basis: <header>, <footer>, <article>, <section>, <nav>, <menu>, <figure>. This gives us tremendous flexibility in terms of how we can think of the page. So it’s not just easier to understand the structure of the page, it’s easier to correctly code the structure of the page.

The beginning of many modern HTML 4.0 pages looks something like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/
xhtml1-strict.dtd”>

But in our brave new world of HTML5, all we need is:

<!DOCTYPE html>

Similarly, the complex XHTML boilerplate declarations many people use can be simply replaced by:

<html lang=”en”>

and encoding declarations such as

<meta http-equiv=”Content-Type” content=”text/
html; charset=utf-8”>

can be toned down to a mere

<meta charset=”utf-8”>

Oh, and we may as well get this next bit out of the way now, even though I hesitate to mention it for fear of being responsible for people writing near-incomprehensible HTML5 pages. You no longer need those double quotes around attributes, so that <p class=credit> is now as legal as <p class=”credit”>. But please use this power wisely.


Just to show that HTML5 isn’t only about structure and saving keystrokes here and there, here’s a nice example of an attribute feature that is simple on the surface, but demonstrates some real power. Paste this simple little document into a text file, and call it something like foo. html:


<!DOCTYPE html>
<html lang=”en”>  
<head>  
     <meta charset=”utf-8”>
     <title>You Can Edit This</title>
</head>
<body>  
     <h1>I Mean, You Can Really Edit This</h1>
     <p contenteditable=true>
     Now is the time for all good cats to come
to the aid of their catnip.
     </p>  
</body>
</html>

The only new thing here that will jump out at you is the attribute of contenteditable on the paragraph tag. You can use this on any element, not just a paragraph, and it takes effect for everything within that element. Now, open this file using any modern browser and you’ll see that you can indeed edit the paragraph - but not the heading! - Right in the browser.

But wait, there’s more! Change that paragraph as much as you like, then save the page to your computer as a new HTML file. Open it up in a text editor, the source code has changed to reflect the text changes you made  in the browser.

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