What HTML5 means - the sequel

A while ago I asked what HTML5 means to you. I got a lot of replies, but would like to gather more. That’s why I’m repeating the question today. What’s in your HTML5 spec? Please add your personal top three of cool new features to the comments.

I’m going to use the replies for setting priorities for my research. My next big topic is going to be offline storage, which is crucial on mobile but only mildly interesting on desktop. I’m not yet sure what I’m going to do after that, though.

Eventually I’m going to count votes so that I know which parts of HTML5 are most interesting to web developers. (And no, this is not a scientific poll in any way, but it’s the best I can do.)

This voting will influence my research programme, though I tend to give mobile-specific topics a higher priority. Besides, some HTML5 functionalities, notably the new semantic HTML tags, don’t need any research because they just work.

In the previous entry the following answers were given, but don’t hesitate to pick something else if you feel it’s more important.

How to participate: Leave a comment with your top three of cool new HTML5 features. Please do not do so if you commented on my earlier entry.

Thanks.

This is the blog of Peter-Paul Koch, mobile platform strategist, consultant, and trainer. You can also follow him on Twitter.
Atom RSS

I’m speaking at the following conferences:

(Data from Lanyrd)

Categories:

Monthlies:

Comments

Comments are closed.

1 Posted by Jan on 6 May 2010 | Permalink

1. Canvas
2. Web Workers
3. Websockets

2 Posted by Chris on 6 May 2010 | Permalink

Desktop notifications, media and offline storage.

3 Posted by kyle on 6 May 2010 | Permalink

Columns
Geolocation
Websockets

4 Posted by Denis on 6 May 2010 | Permalink

-- Websockets
-- Canvas
-- and border-radius of course =)

5 Posted by barryvan on 6 May 2010 | Permalink

1. Canvas
2. SVG
3. Web workers

I think that these three will provide the most benefit to *webapp*, not necessarily webpage, development. As a web app developer, I'm biased, but I do feel that webpages, as a means to provide static information or media (including blogs, wikis, forums, and so on) have just about reached their peak. With the ability to render arbitrary elements and user interfaces and an (admittedly somewhat limited) background processing model, canvas, SVG, and web workers will, in my opinion, spur the development of rich web applications.

I'm really looking forward to the day that I can essentially do away with DOM manipulation, even if its wrapped in a framework.

6 Posted by giolekva on 6 May 2010 | Permalink

1. Websockets
2. Web Workers
3. SVG

7 Posted by alsanan on 6 May 2010 | Permalink

websockets
Canvas
Web Workers

8 Posted by Oli Young on 6 May 2010 | Permalink

Most important because they'll have the most effect on my everyday work
* Input types for form fields – No more date pickers, required fields etc
* Media (video and audio) – The death of Flash can't come too soon
* CSS3 decorations - Rounded corners, drop shadows, multiple backgrounds

9 Posted by Mikk on 6 May 2010 | Permalink

Web sockets
Offline storage / offline apps
File API

10 Posted by Martyn Haigh on 6 May 2010 | Permalink

1, Better semantic markup
2, More intelligent forms
3, canvas

There are loads of things I'm really looking forward to, but I think these 3 are going to really help the web as a whole.

11 Posted by Luke Morton on 6 May 2010 | Permalink

- File API
- Input types for form fields
- Semantic elements

I would also like to say "a as block-level element", just because it reduces the amount of elements needed in a . Actually can't I just vote for everything? Seriously, HTML5 has long been needed and there isn't much in the spec I will not be using.

12 Posted by Fredrik P on 6 May 2010 | Permalink

1. columns
2. border-radius
3. media

13 Posted by Andy Hume on 6 May 2010 | Permalink

1. Workers
2. Websockets
3. Forms

14 Posted by Pedro Vasconcelos on 6 May 2010 | Permalink

Web Workers
Input types for form fields
Canvas

15 Posted by Leandro Heuert on 6 May 2010 | Permalink

1. Input types for form fields
2. Canvas
3. Offline storage

16 Posted by Salva on 6 May 2010 | Permalink

* Input types for form fields
* border-radius (and box-shadow)
* File API

As a developer, this three are going to be used daily (and in fact I'm already using the first two to improve the experience in newer browsers).

Practically all of them are quite important, but I will either use them in very few specific cases (if at all) and others, such as SVG and Canvas, will be used by the 3rd party libraries I use in my apps (eg. for charting), but not directly by me.

17 Posted by Arpan Chinta on 6 May 2010 | Permalink

1. Offline Storage
2. Media
3. Semantic Elements

18 Posted by julian cellini on 6 May 2010 | Permalink

1. Canvas
2. SVG
3. Border-radius

19 Posted by Brian LePore on 6 May 2010 | Permalink

1. Input types for form fields.
2. Border-radius
3. Semantic elements

Sadly I have not had time to look into Canvas, Web Workers, or the File API else I'd possibly be voting on those.

I look forward to your posts on Offline storage. I have been looking at it and can't ever come up with a situation where I'd like to use it that I shouldn't come up with a server side solution to make it work for older clients.

As someone that maintains a CMS, I absolutely hate a element as a block-level element. It makes it damn near impossible to validate the HTML. =/

Am I the only person that cannot wait for datalist to become available in more browsers than just Opera? That element is awesome.

20 Posted by Rudd on 6 May 2010 | Permalink

1. Canvas
2. Websockets
3. Web workers

21 Posted by Matt on 6 May 2010 | Permalink

At work, my top 3 is:
1. CSS Template Layout
2. New form widgets with validation
3. Offline Storage

For my own personal interests:
1. Canvas
2. Web Workers
3. Web Sockets

We don't have a lot of clients that will be utilizing these features. My first list will hopefully save me enough time so that I will get to play with the things on second list.

22 Posted by Mae on 6 May 2010 | Permalink

I love having a structured page so I'm looking forward to these the most:

- semantic elements
- Input types for form fields
- micro data

23 Posted by Rob on 6 May 2010 | Permalink

1. Websockets
2. Web Workers
3. File API

24 Posted by Ivar on 6 May 2010 | Permalink

Svg
websockets
webworkers

25 Posted by V1 on 6 May 2010 | Permalink

1. web workers
2. web sockets
3. canvas

26 Posted by Sean Hogan on 6 May 2010 | Permalink

For me, HTML5 is mostly about Flash (that is, allowing developers to not use it).

My list:
1. Media (video, audio)
2. SVG (and canvas, maybe)
3. input types for form fields

27 Posted by Phunky on 6 May 2010 | Permalink

1. FileAPI
2. Offline storage
3. Web Workers

I'm also intrigued to find out more about pre-defined UI elements similar to what we see with the new input types.

28 Posted by Brian Dillard on 6 May 2010 | Permalink

The new onhashchange event, meaning better history management

Custom data- attributes on HTML elements.

29 Posted by Mario Estrada on 6 May 2010 | Permalink

• Offline storage
• Geolocation
• Media

* Can't leave it out: Canvas

30 Posted by steve faulkner on 6 May 2010 | Permalink

WAI-ARIA
figure/figcaption
new native form controls (when implemented and hooked up to accessibility APIs)

31 Posted by Nicolas on 6 May 2010 | Permalink

- Offline storage
- Web workers
- Geolocation

But many others are really promissing!
Only do I find the semantic part counter productive as I believe that class driven semantic is a better approach but well... I am not a specialist.

32 Posted by Andrew on 6 May 2010 | Permalink

Offline storage
Web workers
File API

33 Posted by Mario on 6 May 2010 | Permalink

1. Datagrid!
2. Datagrid!
3. CSS transitions/animation

34 Posted by Bjørn Nielsen on 6 May 2010 | Permalink

a as block-level element
Columns in CSS
Datagrid

35 Posted by Tanny O'Haley on 6 May 2010 | Permalink

Input types for form fields
Media (video and audio)
Offline storage

36 Posted by Terren on 6 May 2010 | Permalink

media
websockets
file API

thanks for the great blog!

37 Posted by Philippe @ HTMl5 Débloque-notes on 6 May 2010 | Permalink

- SEO with the semantics tags
- offline storage
- notifications
- geolocation

38 Posted by Panayiotis «thePrince» Velisarakos on 6 May 2010 | Permalink

Columns in CSS
Input types for form fields
Semantic elements

39 Posted by Eric on 6 May 2010 | Permalink

semantic elements
form input types
media

40 Posted by Gabi Moore on 6 May 2010 | Permalink

1. Sectioning elements (header, section, article, footer) that reset the heading structure
2. Web Form validation done by the browser
3. Web Sockets

41 Posted by Juan on 6 May 2010 | Permalink

canvas
web workers
geolocation

42 Posted by fpiat on 6 May 2010 | Permalink

Offline storage
Offline storage
Offline storage
file API
form input types

Developers are not graphists. Let canvas for the people who have this artistic background.

43 Posted by Erik on 6 May 2010 | Permalink

-Canvas
-Websockets
-Media (if they manage to agree on the codecs)

Everything bringing webapps closer to the local machine is also cool - file-api, localstorage, notifications, etc.

44 Posted by Eric Lightbody on 6 May 2010 | Permalink

1. Offline storage
2. Media (video, audio)
3. More semantic HTML

45 Posted by Hugo Mendes on 7 May 2010 | Permalink

1. Offline storage
2. Semantic elements
3. Media

46 Posted by Dave Gregory on 7 May 2010 | Permalink

1. Columns in CSS
2. Canvas
3. Web Sockets

47 Posted by Matt on 7 May 2010 | Permalink

Media (video and audio)
Canvas
border-radius

Actually, border-radius is what I use most, but it's the most boring item on this list.

48 Posted by Joost Diepenmaat on 7 May 2010 | Permalink

1. Web sockets (Hurry up with implementing this, browser vendors!)
2. Offline storage (Mostly for mobile at first, but I think we're going to see a lot more of this than you might expect)
3. Canvas

49 Posted by TedBeer on 7 May 2010 | Permalink

Geolocation
Offline storage
Widgets

50 Posted by Neil Craig on 7 May 2010 | Permalink

I'd like to see the href attribute on any element...

51 Posted by Michael Kozakewich on 7 May 2010 | Permalink

SVG
Canvas
Local Storage

52 Posted by Mark Deepwell on 7 May 2010 | Permalink

1) Websockets
2) Offline storage
3) Canvas

53 Posted by Mark on 7 May 2010 | Permalink

1. Menus/Commands/BB
2. new form elements
3. canvas

54 Posted by Dave Smith on 7 May 2010 | Permalink

1. The a element being valid to contain block level elements
The catch though is that no other interactive elements like buttons or other a elements etc. are allowed inside. I wish there was no catch.

2. The video and audio elements
Though I'd prefer an another method through use of the a element.

3. The section element
Could make compiling documents from different sources easier. Though that's not really an authoring issue. Would have liked to see something CSS-wise like h1:scope {margin-left:1.5em;} and h1:andScope {background:#ddd;padding:0.5em;} or similar.

55 Posted by arlen on 8 May 2010 | Permalink

Looks like a mishmash of HTML5 and CSS3 on that list.

I'll plug for:

Semantic Elements
Input (and other form field) attributes
Offline Storage/Applications

56 Posted by JR on 8 May 2010 | Permalink

1. Semantic Elements
2. Media
3. Canvas

I've recently started working for a company that knows very little about HTML (as far as I can see), especially the semantic use of elements.

They're a long way off from using HTML5 (they still have to support IE6), but I think semantic elements will help a lot once they get around to it. I know I plan to switch to HTML5 on my independent projects, mostly for the semantic markup.

Media and canvas are just cool.

57 Posted by Exception e on 8 May 2010 | Permalink

Offline storage
File API
Datagrid

Since you are not talking about semantics, it doesnt make sense to recommend the new semantic elements as a topic for your.

58 Posted by Nick Fitzsimons on 8 May 2010 | Permalink

Semantic elements (in which I include the new values for the type attribute of the input element);

Offline storage;

PUT and DELETE method attribute values for the form element.

59 Posted by Douglas on 9 May 2010 | Permalink

1. SVG, and animation/javascript interactivity with SVG. Compatibility between browsers, and different javascript frameworks to help compatibility (eg. Raphael)
2. Video/Audio
3. Canvas

One thing that is a little annoying is how canvas gets all the attention for being the new way to create awesome vector graphics interfaces, where SVG is probably a much better fit for many cases.

60 Posted by quirckddc on 9 May 2010 | Permalink

1. Media. I dont like de apple-adobe war, but I don't want those 'blue flash cubes' on my Iphone anymore.

61 Posted by PablO on 9 May 2010 | Permalink

1. Semantic elements
2. Input types for form fields
3. Offline storage

62 Posted by Tin on 9 May 2010 | Permalink

1. border-radius
2. Columns in CSS
3. Websockets

63 Posted by Brian on 10 May 2010 | Permalink

1) Asynchronous Scripts
2) Cross Document Messaging
3) Geolocation API

64 Posted by Frank Boës on 10 May 2010 | Permalink

1. Input types for form fields
2. Media (video and audio)
3. SVG

65 Posted by Arieh on 10 May 2010 | Permalink

1. canvas
2. rounded corners
3. columns

1 is obvious.
2 is just to ease development.
3 is because there is no good way of doing this any other way that is also dynamic and doesn't require JS. there are just too many designs that just must have it.

66 Posted by Paul Stone on 11 May 2010 | Permalink

Er, wasn't datagrid dropped from HTML5?

http://blog.whatwg.org/this-summer-in-html-5-episode-33

67 Posted by virtualblackfox on 11 May 2010 | Permalink

1. Offline storage
2. Websockets
3. Web Workers

68 Posted by Alex Lein on 11 May 2010 | Permalink

1) Websockets
2) Desktop notifications
3) Offline Storage

69 Posted by Gonzo on 12 May 2010 | Permalink

Why so many CSS3 on the list? Wasn't the question about HTML5?

My favorites are:

Media
New elements
New JS APIs (File, Geolocation, offline storage, etc.)

70 Posted by Iain on 12 May 2010 | Permalink

Speaking purely from the design point of view, it's the new CSS effects like border-radius, shadows and gradients that will make my life easier. But this question was about HTML5...

71 Posted by prijswij on 12 May 2010 | Permalink

Canvas
Colums
Offline storage

72 Posted by Andrew on 18 May 2010 | Permalink

border-radius
canvas
media

73 Posted by Tasarım on 18 May 2010 | Permalink

Ease of use
border radius
and media
oh and SVG with html5's canvas

If nothing goes wrong, HTML5 will be lovely :)

74 Posted by scott on 18 May 2010 | Permalink

# Offline storage
# SVG
# Websockets

Curious to know why you think offline storage is less interesting on the desktop... I'm really looking forward to having a persistent client-side datamodel sans Gears.
cheers!

75 Posted by SJL Web Design on 20 May 2010 | Permalink

- Improved Semantic Markup
- Better Media Implementation
- Border Radius

76 Posted by Carsten @ Kassel on 25 May 2010 | Permalink

Media !!!! :-)
Websockets
Web Workers
Widgets

77 Posted by Matt on 27 May 2010 | Permalink

Motherfucking columns in CSS.

We have to pick three? Input types for form fields and Widgets, I guess. (Is widgets the thing where we don't have to use iframes anymore? That sounds all right, just talk about the columns thing.)

78 Posted by Van on 27 May 2010 | Permalink

Media
Geo-location
Widgets
Offline Storage
Canvas

79 Posted by Mark McDonnell on 27 May 2010 | Permalink

1. Script attributes such as async, defer, and postonload
2. Media (video and audio)
3. SVG

80 Posted by mawrya on 28 May 2010 | Permalink

1. SVG
2. Websockets
3. FileAPI

I wish XForms was part of the spec.

81 Posted by barberbroy on 8 June 2010 | Permalink

# Offline Web Applications - http://dev.w3.org/html5/spec/offline.html#offline

# Interactive Elements - http://dev.w3.org/html5/spec/interactive-elements.html#interactive-elements

# Additional Form Elements - http://dev.w3.org/html5/spec/forms.html#forms

82 Posted by Dom on 12 June 2010 | Permalink

To me it means the most:

Simple Graphics: SVG
Simple Media: Video/Audio
Simple Design: Border-Radius etc.

83 Posted by Miroslav Nikolov on 12 June 2010 | Permalink

1. Canvas
2. Media (video and audio)
3. Offline storage