Note: Some of this material was originally published on Opera's developer site, dev.opera.com as Get familiar with HTML5!.
We've been using HTML 4.01//XHTML 1.0 (or quite often, some funky hybrid or variation of the two) to structure the content of our web pages for a very long time now, and the specs for both were completed over ten years ago. However unless you've been hiding under a rock for the last year or so, you'll be well aware that there is a new version of HTML in development - HTML5!
HTML 4.01//XHTML 1.0 are ok as they stand, and do their job well enough, so why should we bother to embrace HTML5? In this article I'll answer this question and more. I'll give you the essential background you need to know on why HTML5 came about, where it is up to now, and why it is such a good thing. I'll advise you on how it can fit into your work right now, and I will look at some of the main features of HTML5, so you can see what it adds to the already powerful HTML language.
Why HTML5?
Originally, after HTML 4.01 and XHTML 1.0 were completed, the W3C began to go further along the XML path in their quest to evolve markup to the next level. the next spec they brought out was XHTML 2.0 (first working draft: 2002), which certainly was a step forward from what came before, and included some interesting new features. XHTML 2.0 has many problems, however:
It isn't backwards compatible with the markup already on the Web
The elements work differently
the XHTML mime type (application/xhtml+xml) doesn't work at all on older versions of IE, which still have a significant browser market share as of the time this article was written
The developer tools available weren't ready for working with XML
It doesn't really reflect what web developers are REALLY doing out there in the wild wild web.
As a backlash to this, in 2004 a group of like-minded developers and implementers (including representatives from Opera, Mozilla and slightly later, Apple) got together and formed a breakaway spec group called the Web Hypertext Application Technology Working Group (WHATWG), with the aim of writing a better HTML markup spec that could handle authoring the new breed of web applications, without - crucially - breaking backwards compatibility.
The result was the Web Applications 1.0 spec, which documented existing interoperable browser behaviours and features, as well as new features for the Web stack such as APIs and new DOM parsing rules. After many discussions between W3C Members, on March 7 2007 the work on HTML was restarted with a new HTML Working Group (HTMLWG) in an open participation process. In the first few days, hundreds of participants joined to continue to work on the next version of HTML. One of the first decisions of the HTML WG was to adopt the Web Applications 1.0 spec and call it HTML5.
HTML5 is a really good thing for web developers and designers, because it:
Is mostly backwards compatible with what's already there - you don't need to learn completely new languages to use HTML5. The new markup features work in the same way as the old ones (although the semantics of some elements have been changed - we will cover these differences in a future article), and the new APIs are based on mostly the same JavaScript/DOM that developers have been programming in for years.
Adds powerful new features to HTML that were previously only available on the Web using plugin technologies like Flash, or with complex JavaScript and hacks. Form validation and video are prime examples.
Is better suited to writing dynamic applications than previous HTML versions (HTML was originally designed for creating static documents).
Has a clearly defined parsing algorithm so that all browsers implementing HTML5 will create the same DOM from the same markup, regardless of validity. This is a massive win for interoperability.
Note: one thing to be aware of is that there are two different versions of HTML5. The W3C HTML5 working draft contains the most stable version, including the features that browsers are most likely to have implemented. The WHATWG HTML living standard is where you'll find the really new and nascent ideas that are still being worked on. Note the lack of version number on the living standard - this is because this is intended to be where future versions of HTML are also developed, beyond 5. It is better to look at the W3C version for the stuff that is nearest completion and likely to be implemented in browsers, and therefore most relevant to web developers.
What does HTML5 mean to me?
Well, you might be thinking that it will be frustrating and time consuming to have to learn a new markup language, after taking so long getting to grips with the last one! This is not the case, however - if you are using HTML 4.01/XHTML 1.0, then you are already using HTML5!
This is because HTML5 is backwards compatible - HTML5 includes all the features from HTML 4.01, but it also adds several new, more powerful features. I like to think that these new features broadly come in three types:
New semantic markup elements, to more accurately describe page features that we've previously implemented in non-semantic, inconsistent ways, such as page headers, footers, navigation menus, and form features like date pickers and range sliders.
Features that we've previously turned to plugins (like Flash) or JavaScript kludges to provide, such as video, audio, form validation and animated graphics. HTML5 is deliberately written to compete with plugins.
Background information that was never previously available, but really invaluable such as error handling: how a browser should behave when it encounters bad markup. Ok, so this is more relevant to browser vendors than developers, but it is still worth a mention.
Some parts of HTML5 are implemented in a stable enough fashion across browsers to be used safely even on a production site (as always, you will have to make a judgement call depending on your site's target audience and features). Plus if a feature is not supported in certain browsers, you can work around this - future articles will show you how, at appropriate points.
To give you a short concluding answer, HTML5 is the future of the Web, and a large part of your future as a web developer. I'd recommend that you start learning HTML5 as soon as you are ready - many of the new features will make your existing work a lot easier, and it will future proof your knowledge. If you are a student at college or university and your teacher doesn't know about HTML5 yet, or is unwilling to cover it in your course, show them this article.
HTML5 features
HTML5 contains many new features to make HTML much more powerful and suitable for building Web applications. In the list below I've summarized the main ones you really should know about.
Some of the features listed below are NOT actually part of the HTML5 spec itself, but are defined in closely related specs, therefore they are still valid parts of the new movement towards modern web applications, and useful for you to know about.
New semantic elements: As you will already know, semantics are very important in HTML - we should always use the appropriate element for the job. In HTML 4.01 we have a problem - yes, there are many elements for defining specific means such as tables, lists, headings, etc., but there are also many common web page features that have no element to define them. Think of site headers, footers, navigation menus, etc. - up until now we have defined these using
<div id="xxx"></div>, which we can understand, but machines can't, plus different web developers will use different IDs and classes. Fortunately, HTML5 comes with new semantic elements such as<nav>, <header>, <footer> and <article>. You can learn about these in New structural elements in HTML5.New form features: HTML 4.01 already allows us to create usable, accessible web forms, but some common form features are more cumbersome than they should be, and require hacking to implement. HTML5 provides a standardized, simple way to implement features such as date pickers, sliders and client-side validation. HTML5 forms are covered in detail in the article New form features in HTML5.
Native video and audio: For years, video and audio on the Web has been done using Flash, generally speaking. In fact, the reason Flash became so popular around the dawn of the 21st century is because open standards failed to provide a cross-browser compatible mechanism for implementing such things. Different browsers implemented different competing ways of doing the same thing (eg
<object>and<embed>), thereby making the whole process really complicated. Flash provided a high quality, easy way of making video work cross-browser.HTML5 includes
<video>and<audio>elements for implementing native video and audio players really easily with nothing but open standards, and it also includes an API to allow you to easily implement custom player controls. There are many articles on dev.opera.com covering HTML5 video and audio, but the best place to start is Bruce Lawson and Pat Lauke's inaugural Introduction to HTML5 video article. Also worth checking out is the More accessible HTML5 video player.Canvas drawing API: The
<canvas>element and associated API allows you to define an area of the page to draw on, and use JavaScript commands to draw lines, shapes and text, import and manipulate graphics and video, export in different image formats, and a whole lot more. For more on HTML5 canvas, start with HTML 5 canvas - the basics by Mihai Sucan.Web Sockets: This API (defined in the Web Sockets specification, separate from the HTML5 specification) allows you to open a continuous connection between a server and a client on a specific port and send data in both directions until the port is closed. This improves the efficiency of web applications a great deal, as data can be continuously and accurately exchanged between client and server without constant page reloads, and without constantly having to poll the server to see if updates are available. Introducing Web Sockets will start you off nicely.
Offline web applications: HTML5 provides a number of features to allow web applications to run offline. Application Caches allow you to save a copy of all the assets and other files needed to run web applications locally, and Web SQL databases allow you to save a local copy of a web application's data. Together, these allow you to continue using an application when it goes offline, and then synchronize changes with the master version on the server when the network is available again.
Web Storage: Cookies allow us some degree of local data storage, but their use is fairly limited. HTML5 Web Storage allows us to store a lot more data, and do a lot more with it. Read Web Storage: easier, more powerful client-side data storage by Shwetank Dixit for more information.
Web workers: A common problem encountered by web applications is that their performance suffers when a lot of data processing is required, due to the fact that everything happens in a single thread/process (only one load of processing can happen at once). Web Workers mitigates this problem by allowing us to create background processes to take care of some of the number crunching, allowing the main process to get on with other things. To read more about Web Workers, go to Daniel Davis' Web Workers rise up!.
Geolocation: The Geolocation specification (again, not a part of the HTML5 specification) defines an API that allows a web application to easily access any location data that has been made available, for example by a device's GPS capabilities. This allows you to add all kinds of useful location-aware features to your applications, for example highlighting content that is more relevant to your location. For a basic introduction, read How to use the W3C Geolocation API.
Note: CSS3 is DEFINITELY NOT part of HTML5, and never will be. Don't let your marketing department tell you otherwise.
Summary
And so finishes your brief introduction to HTML5. I hope you found this useful, and that you will continue reading the other articles about HTML5 referenced above.
Comments