HTML5 Tutorials & More

Introducing HTML5

So what exactly does this new version of HTML mean for web designers and developers? While running through every feature of HTML5 in great detail would take considerable time, there are a few features of the new standard that everyone should be familiar with.

An Evolution of HTML

It’s important to point out that HTML5 is an evolution of HTML, not a brand new platform. Unlike the proposed XHTML 2.0 standard, which would have broken backwards compatibility with previous versions, HTML5 is fully backwards compatible with HTML4. That means that the millions of pages and applications already written in HTML4 can smoothly transition to HTML5 by simply adding an HTML5 doctype and introducing HTML5 tags and features as it makes sense to do so. Developers familiar with HTML4 will find that learning HTML5 simply requires building on their previous knowledge.

Standardizing Browser Parsing Rules

One big issue that many web designers and front-end developers might overlook in regard to the development of HTML5 is the issue of error handling. Earlier HTML specifications were somewhat vague about what to do with badly formed code. This left error handling and parsing rules up to the browsers themselves. XHTML attempted to provide a solution to this through stricter error handling that would impose very specific formatting rules on HTML developers. By nature, of course, such a solution could not be backwards compatible - older pages would have to be manually updated in order to adhere to the new standards.

A major goal of HTML5 is to offer an alternate solution to this issue, which is to standardize the parsing of code on the browser end of things. Portions of the HTML5 spec provide rules detailing not only how valid HTML code should be parsed, but also how errors should be handled across different browser engines.

The WHATWG and W3C standards organizations are hoping that these stricter parsing rules on the browser side end up creating a level of consistency in terms of parsing and rendering webpages that has never been seen before. This will theoretically allow designers and developers to worry far less about cross-browser or cross-device compatibility, and write code that will run on any browser, on any device reliably. Of course, the success of this effort is largely going to be determined by how the spec’s suggestions get adopted by browser makers in real world development efforts.

New Semantic Tags

Aside from behind the scenes issues, the biggest changes in HTML5 are primarily attempts to address and better support the ways the web has evolved since the release of HTML4. Despite its success, HTML4 had some major inherent weaknesses. Most obviously to many developers, it didn't serve very well as a web applications platform, requiring add-ons and third party plugins. Less obvious but equally important, HTML4 did a poor job of conveying the meaning of web documents via its structure.

To that end, HTML5 offers markup that better clarifies the structure and meaning of documents. It introduces new semantic tags and attributes, such as header, footer, nav, section and article. Instead of using dozens of div elements with arbitrary class names, developers can clearly define the different sections of a document, along with tangential content, syndication content and header and footer information. This is obviously a huge potential improvement when it comes to applications that attempt to interpret or index web content, such as search engines and data mashup applications. It also provides a richer basis for styling when content is served across multiple formats and devices.

Updating a site with these new semantic elements isn't difficult and doesn't require any special programming knowledge. It does, however, require an understanding of the new HTML outline algorithm - how browsers interpret these tags to create an "outline" of your page's structure.

APIs For Web Applications

HTML5 also introduces a new set of built-in APIs to offer more powerful functionality for building web applications - including features such as web workers that offer improved processing capability, or local storage which offers better caching of user data directly in the browser.

Also new are vastly improved multimedia capabilities. For the first time, HTML will have dedicated video and audio tags, along with bitmap rendering through the canvas tag, potentially replacing plugins such as Flash in many instances. This should reduce the need for third party plugins, and even standardize how complex applications are built for greater interoperability between apps. Much of the functionality, of course, is going to coded via JavaScript, which helps explain why improved JavaScript performance has been the target of much browser development work as of late.

With practical implementation of some of these APIs still in progress, much depends on how they are incorporated by browsers, as well as what third party development might appear in relation to them.

What Is and Isn’t HTML5

As with many emerging technologies, HTML5 has suffered from the tendency of bloggers and marketing people to use the term more widely than is actually warranted. In many cases, people have begun to refer to any rich, standards-based application that offers animation as “HTML5,” even if they only actually using JavaScript-based animation capabilities that have been around for years.

In reality, in fact, the definition of HTML5 is much stricter than that. Even many new standards-based features that many developers are familiar with are not technically part of the HTML5 specification. Features that are not HTML5, but are often mistakenly referred to as such include CSS3 transitions, the WebGL specification for 3D graphics rendered via Canvas, Web Sockets, the new Geolocation API, SVG, and web fonts.

However, there is also a case to be made that HTML5 has become a kind of "brand" serving as a catch-all phrase for the new wave of standards-based technologies currently being adopted. At some point, the discussion should turn not to what is or isn't part of one specification or another, but how to use these technologies to create a rich, standards-based experience on the web.