Whats new in HTML5?
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. HTML5 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 HTML5 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.
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 (eg 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
HTML5 provides a method of defining context menus, making it easier to use these 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 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 crapola 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> - The aside 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
HTML5 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 times, or dates 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
- 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 folling 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 a HTML5 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 HTML5 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
HTML5 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 web sites.
-
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
HTML5 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 easily and efficiently, at the same time as 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 accomodate 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. AFAIK Firefox 3.1 will support more of it, namely the <audio> and/or the <video> tags. Can't wait.