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 likesrc(naturally),autoplay, andloop. 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 menusHTML 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 elementsSince 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 elementsHTML 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, andoptimum.<progress>- This can be used to show a progress bar of some sort. It has a couple of attributes:valueandmax. Themaxattribute can be omitted.
- New form input typesThe input element can now have a new set of types, including:
datetimedatetime-localdatemonthweektimenumberrangeemailurl
- Dropped elementsThe followiing elements have been dropped or replaced:
acronymappletbasefontbigcenterdirfontframeframesetisindexnoframesnoscriptsstrikettu
- Character encoding syntaxThe character encoding syntax for an HTML 5 document is now:
<meta charset="UTF-8">. - New interactive elementsSome 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 anopenattribute 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 havelabelandiconattributes. They can be nested to provide multiple levels of menus.
- New DTDHTML 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 linksThis is now optional as links can be used in conjunction with scripting. Perhaps more useful in web applications as opposed to websites.
- The async attributeThis 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.
No comments:
Post a Comment