HTML5 training: Taking a first look at HTML5

Published by James Williamson | Tuesday, July 13th, 2010

http://blog.lynda.com/2010/07/13/html5-training-taking-a-first-look-at-html5/

In all my years of teaching and writing about web design, I don’t think I’ve ever seen a topic explode in terms of interest level and passion as quickly as I have with HTML5. Despite the huge amount of interest in the topic, there is still a great deal of confusion about what HTML5 is and how to go about learning it. In my opinion, one of the best ways to approach HTML5 is by first comparing it to HTML 4 and learning the differences. That way, it’s easier to understand exactly what is changing in regards to HTML and cut through some of the hype and clutter that is currently surrounding the topic.

Although HTML5 represents an ambitious step forward in the evolution of HTML, it is largely a revised version of HTML 4. If you are comfortable writing HTML4, you should find yourself quite comfortable with the majority of the HTML5 specification. With that in mind, let’s take a closer look at the differences between HTML5 and HTML 4.

First, it’s important to note that the HTML5 specification is designed not just to replace HTML 4, but also the XHTML 1.0 and DOM Level 2 specifications. That means the serialization of HTML to XML and the DOM specification are now contained inside the HTML5 specification, instead of belonging to separate specs. It also contains detailed parsing rules that are designed to improve the interoperability of systems that use HTML documents. As such, the HTML5 Specification is much larger than HTML 4 and covers a lot more ground.

One of the first places you’ll notice a difference in writing HTML5 documents is in the doctype and character encoding. In the past, based on the version of HTML they were using authors have had to use long, arcane doctypes to trigger standards mode in modern browsers. You may recognize this code, for example:

Now, rather than having to deal with multiple complex doctypes, you simply use a single doctype that declares the document as an HTML file. Since HTML is no longer SGML-based, no DTD is required. Character encoding is likewise simplified. All that is required now is a meta tag with a charset attribute. Here’s what the above code looks like in HTML5:

Much simpler!

There are, of course, new elements in HTML5 that are not part of HTML 4. These new elements assist with page structure and code semantics, allow embedded content, and include new phrasing tags that help add additional meaning to content within the page. By now, you’ve probably heard of new elements such as the section, article, and header tags that will make structuring pages more meaningful and elements like the video and audio tags that make it much easier to add multimedia to sites. In addition to new tags, several new attributes have been added to existing elements to extend their power and functionality as well.

Forms undergo a dramatic update in HTML5 as well. Much of the work done on the Web Forms 2.0 specification has been added to the HTML5 spec. The result of this is new form controls and input types that allow you to create more powerful forms and more compelling user experiences. New form elements include date pickers, color pickers, and numeric steppers. The input element is now much more versatile, with new input types such as url, email, and search that will make it easier to control the presentation and behavior of form content both on the web and within mobile applications. It’s worth noting that HTML5 also adds support for the PUT and DELETE form methods, making it easier to submit data to a wider array of applications.

By far the addition to HTML5 that is getting the most attention is the introduction of several new API’s that are designed to make developing web applications easier across multiple devices and user agents. These APIs include the much talked about video and audio API, an API for building offline applications, an API for editing page content, one that controls Drag and Drop functionality, another that focuses on history, and one that controls Application protocols and media types. Other API’s like Geolocation, Web Sockets, and Web Messaging are associated with HTML5, but are defined within their own specifications.

Those are a few of the highlights of the differences between HTML5 and HTML 4, and should give you a good idea of how HTML5 will change the way that web sites and web applications are authored.