An Introduction to HTML5

By Alexander Jones,

Introduction

What is HTML5? Well it's a Web Specification in the making, and is a language for structuring and presenting content for the World Wide Web. From reading this article you'll gain the knowledge about where it's come from, where it's headed and how you as a developer can get started with it.

It started at WHATWG (The Web Hypertext Application Technology Working Group) who began to work on the new standard in 2004, while the World Wide Web Consortium (W3C) was focusing future developments on XHTML 2.0, due to the fact that HTML 4.01 had not been updated since 2000.

By October 2006, it was clear that the WHAT Working Group had picked up serious momentum, Tim Berners-Lee, the founder of the W3C itself, announced that the W3C would work together with the WHAT Working Group to evolve HTML.

One of the first things the newly re-chartered W3C HTML Working Group decided was to rename "Web Applications 1.0" to "HTML5". In october 2009, the W3C allowed the XHTML 2.0 Working Group's charter to expire, and decided not to renew it, this was mostly due to that few websites use perfect syntax, and XHTML 2 was going to enforce perfect syntax. They issued this statement to explain the decision:

When W3C announced the HTML and XHTML 2 Working Groups in March 2007, we indicated that we would continue to monitor the market for XHTML 2. W3C recognizes the importance of a clear signal to the community about the future of HTML. While we recognize the value of the XHTML 2 Working Group's contributions over the years, after discussion with the participants, W3C management has decided to allow the Working Group's charter to expire at the end of 2009 and not to renew it.

This allowed the development and work to go full steam ahead on HTML5, and although developers had known about HTML5 for years it became the topic of mainstream media interest in April 2010 after Apple Inc's CEO Steve Jobs issued a public letter titled "Thoughts on Flash" where he concludes that with the development of HTML5, Adobe Flash is no longer necessary to watch video or consume any kind of web content. This sparked a debate in web development circles and really bought HTML5 to the forefront.

WHATWG's Work

Prior to the expiration of the XHTML 2.0 spec, at the start of the development of HTML5 standard, a bunch of people broke away from the W3C and started the WHATWG. The idea was to try and rethink the whole standards making process, not just HTML.

The WHATWG intends to address the need for one coherent development environment for Web Applications. To this end, the working group will create technical specifications that are intended for implementation in mass-market Web browsers, in particular Safari, Mozilla, and Opera.

It was important that rather than trying to create a perfect specification and standard, but to explain how to use HTML and focus on the real developer challenges that occur every day. They also took the time to codify some conventions that sprung up in the community.

WHATWG stated in their starting-up news article: The group aims to develop specifications based on HTML and related technologies to ease the deployment of interoperable Web Applications, with the intention of submitting the results to a standards organisation. This submission would then form the basis of work on formally extending HTML in the standards track.

The WHATWG are the ones who introduced a lot of the new elements in the HTML5 spec, these came from the community mostly, people who have been making specific applications and features of the web for years, but WHATWG wanted to make specific peices of the mark-up (like the video and audio elements) to help people from what they have already been doing. This didnt just include mark-up, the WHATWG also started to create JavaScript API's.

Alex Kessinger talked about HTML5 starting to look "app" like thanks to these developments: This is where HTML5 started to look "app"-like. They created standards for offline data storage, and an offline application cache, so that whole apps could be stored offline.

1. HTML5 Doctype

There is a long history behind the doctype, which began with Microsoft's development of IE5 for the Mac OS; when they had built a browser that supported standards so highly and so well that it caused web pages to rendor inproperly, not according to the new specification, but according to how they were built at the time to suit the older browsers. The IE/Mac browser was so advanced that it broke the web, which brought about the need for a change.

Microsft came up with the "doctype" as a solution, which, when placed as the first line of HTML in a page before the html tag it would activate the new standards support. This idea spread and web authors were soon using the doctype when developing sites for the newest browsers. This didnt come without it's problems, web pages in older browsers had been authored based on the quirks people used and it soon led to major browsers having two modes: "quirks mode" and "standards mode".

Mark Pilgrim discusses this in his Semantics article: When Mozilla tried to ship version 1.1 of their browser, they discovered that there were pages being rendered in "standards mode" that were actually relying on one specific quirk. Mozilla had just fixed its rendering engine to eliminate this quirk, and thousands of pages broke all at once.

These modes eventually grew out of control (to find out more about the different doctypes, which is advised, go and read Henry Sivonen's article) and now we have "standards mode" which, is currently triggers with 15 different doctypes, the following being one of them:

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

Now, with HTML5, "upgrading" is literally just a matter of changing your doctype. Unlike previous versions of HTML where picking the right doctype is difficult, with HTML5 there's just one (thank goodness):

<!DOCTYPE html>

2. Markup

HTML5 introduces a huge number of new elements and attributes that reflect what the World Wide Web needs based on typical browser usage. There are many Semantic changes to replace the generic usage of <div> and <span> elements.

Bringing in the meaningful header, section, article, nav and footer elements amongst many more. Some deprecated elements from HTML 4.01 have been dropped, including purely presentational elements such as <font> and <center>, whose effects are achieved using Cascading Style Sheets.

There is also a renewed emphasis on the importance of DOM scripting (e.g., JavaScript) in Web behavior. As of 5 January 2009, HTML5 also includes Web Forms 2.0, a previously separate WHATWG specification.

To find out more about the new Mark-up semantics and how to get started have a look at my Semantic Markup Tutorial →

3. New API's

In addition to specifying new markup, HTML5 specifies new scripting application programming interfaces (APIs) and existing document object model (DOM) interfaces have been extended. The following defines a list of the new HTML5 specific API's:

  • The 2D Canvas API
  • Offline storage database (offline web applications)
  • Drag-and-drop
  • Inline Editing
  • Selectors
  • Messaging
  • Microdata

4. Thing's that are not part of HTML5

Features that are not currently in this document that were in the past considered part of HTML5, or that were never part of HTML5 but have been referred to as part of HTML5 in the media, include:

  • Web Workers
  • WebSockets
  • WebSocket protocol
  • Geolocation API
  • SVG
  • MathML
  • CSS
  • Server-sent Events

5. Error handling

An HTML5 (text/html) browser will be flexible in handling incorrect syntax. HTML5 is designed so that old browsers can safely ignore new HTML5 constructs. In contrast to HTML 4.01, the HTML5 specification gives detailed rules for lexing and parsing, with the intent that different compliant browsers will produce the same result in the case of incorrect syntax.

6. The HTML5 Standardisation Process

As mentioned previously it's clear that defining a new web standard is a long process over many years of development, but it's important as a develop to understand where we're at today and how that affects your work going forward. WHATWG began work on the specification in June 2004 and as of January 2011, the specification has reached the 'Draft Standard' status at WHATWG along with the Working Draft state at the W3C.

The specification is still of course ongoing work, although parts of HTML5 are going to be finished and implemented in browsers before the whole specification reaches final recommendation status.

WHATWG talk about this in their When will HTML5 be finished? article: Different parts of the specification are at different maturity levels. Some sections are already relatively stable and there are implementations that are already quite close to completion, and those features can be used today (e.g. <canvas> ). But other sections are still being actively worked on and changed regularly, or not even written yet.

Ian Hickson, who works for Google and who is editor of the specification, expects the specification to reach what's called the "Candidate Recommendation" stage during 2012. W3C is currently developing a large test suite to achieve a full understanding of the specification and the target date for the Recommendation is now 2014.

Too find out more about the specification, from a developers point of view, it's advised to have a look at HTML5 for Web Developers, which was created by Ben Schwarz who built the site to give the specification more readability and to focus on producing a more developer friendly resource:

HTML5 for Web Developers pic
HTML5 for Web Developers

HTML5 for Web Developers: The focus of this specification is readability and ease of access. Unlike the full HTML specification, this "web developer edition" removes information that only browser vendors need know.

To find out more about the different specification sites around for HTML5 and what each one means, have a look at my 'Which HTML5 Specification' article.

7. Conclusion

It's clear that at this point the HTML spec is in a good position, WHATWG and W3C are making huge advancements with the spec and the leading browsers are constantly working to support the standard (recent releases of IE9 and FF4) so that we can really put it out there.

Personally, i'm excited to be using HTML5 as a means to 'do more' with the web, and hopefully at this point you should have a clearer view of how HTML5 came about and what it actually is. From this point it's time to start developing and using HTML5 right now. With the specification still being a work in progress, it's important to keep track of the changes and update any work you do to suit current and upcoming browser updates and/or spec changes.

The Next Step

This article focuses on some of the main areas of how HTML5 came about and where it's headed, the next step is to get down and build. Try new things, experiment and learn; but stick to the spec. Be sure to check out some of the articles on this site to get started and if you're still hungry to find out more about the origins of HTML5 have a look at the links below: