Contents
Introduction
HTML4 has been with us for a while now, roughly ten years. And, it hasn't really seen a major update. Sure there's XHTML, but that did little more than make things slightly stricter - making you write better quality code if you were at all concerned with compliance. HTML 5 does more than that. For one thing, it adds a few new features. Not a huge amount, but the ones that it does add are very useful.
Work on HTML 5 started way back in 2004, and now it's starting to get interesting. Browser support is increasing, and the element I'm most interested in - CANVAS - is supported by four out of the major five browsers. It is, however, not really feasible to use it since MSIE doesn't have any support for it.
So what's new?
<canvas>
<canvas> is a 2D (at the moment - other dimensions may be forthcoming) drawing area controlled by JavaScript. You can use it for a wide variety of things - graphs, games, presentations etc. Because it's controlled by JavaScript, you can interact with it very easily. An example is the tooltips feature I've added to RGraph. In short, click on a bar, and you get a tooltip that can contain a wide variety of HTML - images, videos etc. I've written a short primer to the <canvas> tag here.
<video>
The <video> tag makes it easier to embed video clips into your web pages. It has attributes like src (naturally), autoplay, and loop. The <video> tag has implications on usability (e.g., blind access), and so can contain additional markup describing the video, ideally, the full transcript of the video.
<audio>
The <audio> tag is much like the <video>, but for audio files. Surprisingly.
- Context menus
HTML 5 provides a method for defining context menus, making it easier to use them in web applications. Perhaps, not so useful for websites, but certainly for applications where context menus could provide a raft of options without taking up space in the UI.
- New structural elements
Since HTML is largely unstructured, a few new elements have been provided to try and rectify this. These elements include:
<section> -A section, or section of a chapter of a text or a book. <header> - The page header. This is not the same as the <head> element. <footer> - The footer of the page. Typically where all the legal crap goes. <nav> - Navigation links to other pages. You could put your websites navigation in this, for example. <article> - A blog article could be encapsulated by this, for example. <aside> - This tag can be used to provide extra information for a block of text. Much like sidebar material in books etc. <figure> - The <figure> element can be used to annotate your main text with diagrams which aren't necessarily imperative to the text.
- New inline elements
HTML 5 introduces new elements to help indicate basic elements such as times or numbers.
<mark> - This denotes that a bit of text is marked in some way. You could, for example, use this to mark search terms in a list of results. <time> - You can use this to represent time or date in your block of text. <meter> - This can be used to indicate a figure of some sort. It can have multiple attributes including: value, min, max, low, high, and optimum. <progress> - This can be used to show a progress bar of some sort. It has a couple of attributes: value and max. The max attribute can be omitted.
- New form input types
The input element can now have a new set of types, including:
datetime datetime-local date month week time number range email url
Some of these are already common in desktop UIs, so shouldn't be difficult to implement, and will be more familiar to users when filling out your form.
- Dropped elements
The followiing elements have been dropped or replaced:
acronym applet basefont big center dir font frame frameset isindex noframes noscript s strike tt u
- Character encoding syntax
The character encoding syntax for an HTML 5 document is now: <meta charset="UTF-8">.
- New interactive elements
Some nice things that will make building websites and, perhaps more pointedly, web applications, easier:
<details> - This can be used to provide further information about something specific. For example, it could be implemented by browsers as tooltips. This tag can have an open attribute which dictates whether the content is initially shown to the user or not. <datagrid> - Unlike traditional tables (which are designed to be static), this can be used to provide a set of data with some degree of interactivity. For example, selecting rows or columns, editing data, sorting, and generally interacting with the data in the client. <menu> - Previously a deprecated element, <menu> is back in HTML 5 with a new meaning. It can, for example, contain <command> elements which cause a particular action to happen. For example, you could use this element to provide a toolbar of sorts, or a context menu (see above). It can have label and icon attributes. They can be nested to provide multiple levels of menus.
- New DTD
HTML 5 has a new, much simpler DTD: <!doctype html>. Much nicer, I think you'll agree, and far more memorable. As I understand it, this results from HTML not being associated with SGML any more.
- Optional href on links
This is now optional as links can be used in conjunction with scripting. Perhaps more useful in web applications as opposed to websites.
- The async attribute
This stipulates that a block of script can be executed asynchronously, instead of blocking the rest of the page until it's finished.
Summary
HTML 5 could well be the update to HTML that everyone has been waiting for. It provides useful additions to the language that will make building web based applications far more easier and efficient, at the same time making the code simpler.
Naturally, not all browsers will support everything (<cough>MSIE</cough>), but it will come in time, and new items have been specifically designed to accommodate this. So, everyone wins. Most browsers already support some of the specification, some for a long time. An example of this is <canvas>, supported by Firefox, Opera, Chrome, and Safari. As far as I know, Firefox 3.1 will support more of it, namely the <audio> and/or the <video> tags. Can't wait.
Related links
