Transcript: The Future of HTML 5

By Bruce Lawson

From the FOWA09 video, transcribed by Joel Overton

I'm from Opera, which is the Norwegian, snowy bunch of scrumptious people who bring the Opera browser and Opera Mini, which is the most widely deployed browser on mobile phones in the world. But I'm not here to plug it. I do need to say that Opera is very actively involved with the specification of HTML 5. I'm not one of those people. Until a year ago I was a developer, and I've been looking at it from a developer's perspective. So anything I say is my personal opinion and not that of Opera in the HTML 5 working group.

HTML 5, I believe, is the future of web applications. It's the foundation upon which we will build web apps. So, what is it? Here we see HTML1, 2, 3 and 4. You can see that HTML 4 is a fully formed, fully evolved guy. If you're writing static pages that are mostly text, images, and links, you have no reason to stop using HTML 4. In the same way that XHTML 1 did not replace HTML 4, HTML 5 will not replace HTML 4.

Grossly simplifying, but very useful for our purposes, is this slide. HTML 5 is a pimped up version of HTML 4. It has extra bling that makes writing web apps easier. Most of the things it brings are things that we already do, but we do them hacking around in JavaScript or stuff like that, or maybe a bit of Flash, and what HTML 5 brings is a robust, hopefully cross-browser way of doing these things that is a standard, that doesn't involve voodoo magic with JavaScript. It doesn't replace JavaScript. Most of it is about JavaScript and DOM APIs.

It originally started life as 'Web Applications 1.0'. That's what the spec was called. It's only called HTML 5 since last year when it got brought into the W3C fold. It's being designed as an open standard and (I make no bones about it) it competes with Flash and Silverlight. Because, I believe— and maybe a lot of you guys do too— I believe that the web is too vital a platform— for commerce, for business, for society— to be in the hands of any one vendor. [He pauses for applause] I'm going to stop now while I'm on a high!

All of the browser manufacturers are participating in the development of HTML 5, including Microsoft. They were a little bit late to start actively participating, but they are participating. It started off with Opera, Mozilla joined in, then Apple. The guy who worked for Opera moved to Google, who make Chrome, and one of the co-chairs of the working group is a Microsoft employee. It's still in development, the spec is not yet finished, but it goes to last call this month.

Predicting the future is hard. This is a prediction of a lady's bedchamber in the year 2000 as drawn in 1900. It's somewhat inaccurate although it's very much like the hotel that Carson have given me for tonight, so... So what I'm going to do is show you the things you can do now, and then move further out to the things that are just around the corner, and hopefully I won't therefore be too inaccurate.

Canvas

So, one cool thing for web apps is Canvas. Canvas started life as an Apple proprietary thing. All of the browser manufacturers liked it, we've all implemented it, and it's been codified as a specification. It's an immediate graphics mode without plug-ins. If you want to make dynamic graphics now, you either have to make them on the server, which is slow, or you use plug-ins, like Flash, or Java. But Canvas is an immediate graphics mode. I work for Opera, but I want to show this is cross browser, so here's some Canvas in Firefox. this is a nice app. This text is real text, but the background stuff is just Canvas making eye-candy and there's nothing wrong with eye candy. This is really cool.

Okay, let's look at some things in Opera. Here is a first person shooter game. This is written in JavaScript and drawn directly onto the screen with Canvas. If you're like me, and not of a militaristic bent, then I recommend to you this first person giver, in which you wander round giving people flowers. This is natively supported right now in Opera, Safari, Firefox, and Chrome. What about IE, I hear you say? Great question, guys.

What about IE?

No problem. Canvas explorer at sourceforge (exCanvas.sourceforge.net) is a freely downloadable JS library that will translate your Canvas on the fly into something that IE has had for donkey's years called VML. If you download this and plug it into your site, then Canvas will work in IE. Not perfectly in very circumstance, but well enough.

What about accessibility?

Okay. You're all top notch developers, or you'd not be here, so... after you look at this for slightly longer, you might think 'what about accessibility?' This is really important. Canvas at the moment, is unfortunately not accessible. Think of Canvas as an image without even alt text. It's just pixels manipulated by script. So even if you put text into a Canvas, it's just like an image of text made with photoshop. That text cannot be got by the DOM. There is no DOM— that's great, because it's really really fast, but it means there's nothing for assistive technologies to hook into.

The spec defines fallback content, and that just sits in-between the Canvas tags. This ain't good enough. The reason is, is that the fallback content is only given to browsers that can't use Canvas. If your browser can use Canvas, but you can't see it, you can't get to that fallback content at the moment. This is a known problem. There is an accessibility task force proposed by the W3C. I'm glad to say that yesterday Opera put their support in for this task force to be set up and I imagine that the other browser vendors will also do so.

There's a guy in Opera who I know and work with, and I've just introduced him to the guys in Adobe who are responsible for retro-fitting Flash for accessibility. So hopefully there'll be some movement on this, but at the moment, Canvas isn't accessible. It has to supplement stuff that's already on the screen.

Here's a nice example of this. This is a JQuery plug-in written by some guys called the Filament Group. What this does is it graphs the information on this accessible data table. So if for example I make this something like 450, hopefully you'll see it graph in real time. The JQuery plug-in is getting the information out of that data table and making it a graph. This is a brilliant example of accessible use of Canvas. Because of course, if you're using a screen reader, you can actually get to that information, and the Canvas supplements it.

If you really need to have vector graphics in your application— and why wouldn't you— I recommend using something called SVG. Scalable Vector Graphics. This spec is 6 years old, it's supported in Opera, Firefox, Safari and Chrome. What about IE? There is this JavaScript library available to you which translates your SVG for IE. I think it uses Flash. Google are also writing an application called SVG Web which is currently in alpha. The good thing with SVG is that text remains text and therefore it can be accessed by a sufficiently clever assistive technology. So: SVG for content, Canvas for bling or supplementary stuff— for now. For now.

Forms

This is another really cool thing that you can do now. Everybody hates writing forms. The reason that we hate writing forms is that you have to spend ages doing form validation in JavaScript. So, let's look at an HTML 4 form. Here is a dull form, and if I hit send (there's no validation on this page) it just gets submitted. So obviously at 5 o' clock on a Friday, you've got this form, and you're going to either have to write some JavaScript validation or get somebody else's and nab it... and then you're never quite sure how robust it is... and it's 5 o' clock, and all the cool guys from marketing upstairs have already gone to the pub, and you're feeling a bit grumpy, but with the magic of HTML 5, your HTML fairy-godmother will tap you on your shoulder with her wand and say "You shall go to the pub, cindarella".

This is the code for that form. Trust me, it is. So let's add some HTML 5 magic. The first thing I'm going to do is add the attribute autofocus. Hopefully, If I haven't got this wrong, when I refresh, you'll see that the cursor's gone in there. A small thing, but in certain circumstances this is great for usability and it saves you writing that little bit of JavaScript.

Let's go a bit further and we'll add the attribute required. When I go refresh, what I've got here is a CSS Pseudo-class that applies a red outline to any form field that's required. And now, if I hit send, through the magic of Hixie's Pixies, you get some validation and you have to supply a value. This is built in to the browser. There is no JavaScript required. This is great because it's less for you to write. It's great if you're on a mobile phone or a slower connection because there's less for you to download.

E-mail Addresses and URLs

We can go even further than that and I can say, for example, name=email, type=email. Notice in HTML 5 you don't need quotes. If you want quotes, you can use them, but you don't need them. And that's because no browser ever really needed quotes. XHTML validators did, but browsers didn't care one way or the other so it's optional.

Okay this is Opera, which has given me this (in my opinion, somewhat 'mystery meat') icon that tells me this is an email field. So if I type in a malformed email address, it'll tell me it's not a legal email address, because inside the browser, it knows the format of email addresses. That's pretty cool, that saves you quite a bit of validation, and I can also say type=url, and now if I type in a malformed webpage, again, it'll say 'this is not a valid web address'.

You've done this in 3 minutes, and you go to the pub. That's a result. [Applause]

And there's more. This is also HTML forms. You might hear this referred to as 'Web Forms 2.0'— that's the old name, there was a spec called 'Web Forms 2.0' which got rolled into HTML 5. HTML 5 is a bit of a moving beast by the way, it splits out sub-specs like Amoeba, other specs get rolled in... think of HTML 5 as an encompassing term, like AJAX, or something— a broad raft of new technologies you can use.

DataList

So. DataList. This is a cool new input type. It looks like a select, and it gives you a selection of predefined options. But I don't want to be Mr, Ms, or Mad Professor, I want to be Dark Lord. So that allows me to either select from some predefined options, or put my own in.

Min & Max

Here is <input type=number> and I've said min=18 max=25 and it only allows me those options, and if I type in '27' it's too high and it handily tells me.

Dates

Now this one is really cool. This is cooler than Lou Reed and Bob Dylan having a snowball fight in Winter on Pluto it's so cool. Okay, so. We've all had to solicit date inputs and you never know— is the first of March 03/01 or 01/03; is the year 09 or 2009... and so, you see those horrible little date pickers flash up and everybody does them differently and they're a pain to write. So, <input type=date> and in the browser you get a calendar widget, so that you can't input an invalid date. That's given to you by HTML 5 aware browsers.

Sliders

Here's an attractiveness slider. This is <input type=range>. If you've ever seen spinal tap, you'll know what I'm doing here— I'm giving myself an attractiveness of 11.

Patterns

This is really cool. A pattern attribute. You give a regular expression, and the browser will validate it against that. So, here, it wants a single digit followed by an uppercase alpha-numeric, 3 of them. So that's the wrong format. Any regular expression, directly from JavaScript, they're exactly the same, and you can validate this stuff.

Cross-browser

So, I've shown you in Opera. Let's have a look in the other browsers, because this is a cross-browser open specification. Some of these forms are coming into WebKit— so, this is Google Chrome. And you can see that Chrome haven't yet implemented the datalist or the date but it degrades back to just a normal <input type=text>. So it's backwards compatible in that sense. Now, WebKit do have the slider although they don't have the output tag that produces this [the output of the slider's value].

One cool thing that WebKit's got which we haven't got in Opera yet is the placeholder attribute. I can give a hint that in this field it says digit followed by 3 upper case letters— that's a hint for the user. If I click into that, it disappears and if I click out, it reappears. So that's really really cool.

File uploads

You can also have multiple-file uploads too. This is file, <input type=file>, with the attribute of multiple. And there I select 3 things, and WebKit's told me that there are 3 files selected. So that's pretty blummin' cool.

Legacy

But, I know you're thinking, what about legacy browsers? Okay, well I've already shown you that these new input types go back to <input type=text>, but you can do feature detection on this stuff. A guy called Faruk AteĊŸ and another guy called Paul Irish have written this really cool library called Modernizr. It's 7kb. It does feature detection and tells you what the browser supports.

So, there's two things you can do. You can either use these new things and, if your browser doesn't support them, then it goes to the server side validation. Or, use Modernizr, and if Modernizr tells you that the browser doesn't support this stuff, then just fall back to the JavaScript validation that you already have. If Modernizr tells you that the browser can do it, then let the browser do it.

Geolocation

Okay, I've only got a few minutes and I want to show you some more cool things. This is further away now. This is geolocation. It's available in Firefox 3.5, in Safari on the iPhone, and in a Labs build of Opera. I hope it's going to work now. This is HTML5Demos.com. It's maintained by a friend of mine called Remy Sharp, who is.. just... 'Mr JQuery' out of Brighton. Your geolocation is obviously sensitive for privacy reasons, so the browsers all ask you whether you're willing to share your location with the website. You say yes, and hopefully though the magic of HTML 5 it's going to come back and tell us where we are. My web access has gone down, which is kind of defeating my ability to show you some of these live demos.

Browser Storage

Cookies are really really clunky beasts. So HTML 5 gives you local and session storage. Local storage is the ability to store any amount of data that you want locally on your machine. That lives until you clear it. Session storage lives for the life of that session, i.e. as long as that tab is open. The best thing— for me— is web database. This is only implemented in Safari so far, although I've seen builds of Opera internally that do it. It's an entire SQL database inside your browser. You can store what you want using SQL and get it back using JavaScript. I can't show you that if we're offline.

Video

I'm going to overrun just slightly and show you something that's really pretty cool. This is HTML 5 video. I don't know if you would use this in applications, but we've all seen horrible horrible video embedding stuff that things like YouTube give us. In HTML 5 you can embed a video just like this. Here's my HTML 5 doctype, then...

<video src=a-video.ogg controls autoplay>Oops wrong browser, fallback content</video>

So I've got controls because I want the browser to give me stop/play/pause etc, I want it to autoplay, and this stuff in the middle is fallback content, where you should put a link for the user to download the video. And hopefully because this is on my local machine, I can show you. Here's the video, that's me and my kids mucking about there. This is no plug-ins. There's no Flash, or anything like that. This stuff lives inside the browser. And because these bits and bytes live inside the browser, you can muck about with them, with script. So here, for example, I can grayscale it in real time. If I want to, I can trace the edges. You can do all kinds of things. Anything your imagination will dream up, you can do, because this stuff lives inside the browser with no plug-ins.

So that's my time over I believe Mr Carson. I'm staying here tonight and I'm here all tomorrow, so if you've got any questions about HTML 5, I'll be delighted to answer them. Thank you very much for your attention.