Differences between HTML 4 and HTML5

Now it’s time to 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. The complete, up to date list of all the technical differences may always be found on the W3C’s site. You also may want to refer to this document for the actual details of the HTML5 specifcation itself.

The frst thing you should know is that, perhaps for the frst time, the development of a language standard is acknowledging the real world. In order to keep fle compatibility with the current standard - which is technically HTML 4.01 - the brave decision was made to separate the way the web browser renders fles 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 fles 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.

This is great news to those of us who slogged through the1990s. To be exact, 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. The mantra: use CSS instead.

I’ve been trying my best to break it to you slowly, but frankly, all presentational elements are coming out of HTML5. My advice: learn lots more CSS, until you can quote chapter and verse in your sleep.

The good news is that even though this is a big change, it’s a change for the better. Browsers of the future (just another month or two!) 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 fgure out the details. For instance, new structure elements include article, aside, fgcaption, fgure, footer, header, hgroup, nav, section, and summary, all of which refer to the structure of the document itself and leave rendering to the browser.

There are still some new elements that deal with text on a detailed level, however: you’ll code wbr when you think it’s possible to do a line break, but the browser will decide for you. Another hint element is bdi, used to mark an area where bidirectional text formatting can be done (primarily for mixing left-right and right-left languages in a single document). Its complement, bdo, lets you explicitly override and force a particular directionality. For even more slick internationalization, the elements ruby, rp, and rt are included for ruby annotations, which are meant for pronunciation aids rather than for Ruby On Rails programmers.