Grow your CSS skills. Land your dream job.

Poll Results: HTML5 Features in Use on Production Sites

Published by Chris Coyier

As a follow up to asking people if they are using HTML5 or not, I asked the people who are:

What features of HTML5 have you used on production sites?

These are the levels of popularity, from almost 3,000 voters:

Not a big surprise that using the new semantic elements (like <nav>) is the most common use of production HTML5. It's easy, it's hip, it feels good.

Right behind that are the new form features. I'm happy to see that, as these things are also very easy to implement and usability tremendously, as well as replace clunky-ish JavaScript methods (I'm thinking of things like range inputs and the placeholder attribute).

Third place is the audio and video features. I'm sure iDevices helped push that along, as using HTML5 is really easy and works on those devices. Fallbacks are now also easy to implement.

The least popular feature is cross document messaging. Also not a huge surprise as it's not all that common of a thing to need. I do think this is super duper cool though, especially as I've been working on a thing that uses it.

"Other" came in ahead of a number of other features, so apparently I've missed a number of HTML5 features that people are actively using. Please share!

Comments

  1. Are there any links or examples of “cross document messaging” you could link us to? I’d love to learn more about it.

  2. Permalink to comment#

    I’d like to pedantically point out that Geolocation is not actually part of the HTML5, it’s separate.

    As a curator on HTML5 Gallery I get to see a lot of HTML5 sites come in and I can confirm that most of them are simply using the new doctype and elements, which of course is great to see. Of course some of the elements are being used incorrectly (e.g. using menu, which has a completely different use, instead of nav) but it’s all a learning curve.

  3. I wonder how much Google’s nixing of H264 is holding back the Video tags.

    Also, I wonder if people are including in HTML5 based mobile apps into the count of “Production Sites” since im sure Offline Storage is used heavily in that type of environment.

  4. I am certainly using the new doctype and semantic elements. My projects don’t require much more than that at the moment.

    Thanks for posting this, Chris!

  5. Permalink to comment#

    I love that the doctype is actually short enough to hand code every time. There are some other tags that can get slimmed way down that I enjoy using as well:

    ... ... ...

    Just seems nicer and easier to look at / organize / code.

  6. Permalink to comment#

    The new elements like nav and header are lame. All they are is nothing more than renamed div elements.

    I don’t care about semantics, if another developer even website user viewing your source code can’t understand that a div with an ID of “header” is the site header and image with an ID of “logo” is the logo, then they aren’t web developers.

    • Permalink to comment#

      they’ll be more than that eventually, but for now, that’s right. it’s the browser that will (eventually) be trying to understand that <div id=”header”> but won’t.

    • Humans aren’t supposed to be the ones who know/care/notice the semantic elements. Those are meant for the computer. Humans pretty much recognize logos and headers and navigation instantly, computers are like “oh hey, data, what does it mean?”. With Semantic tags and markup, they can, or will soon, be able to go “oh hey, that’s navigation, I know what to do with that now!”

    • Permalink to comment#

      Also a very nice side-effect: you can use more than one h1 if there is any need for (e.g. in your Header for a Logo -> h1, Subline -> h2 plus seperate h1, h2 and so on for your “Content”).
      Also the new aside-Tag is a nice one for keeping your semantics clean.

    • Permalink to comment#

      Also, the likes of header, nav and footer don’t have to be limited to the sections of page that you think they belong. You can use a header tag to indicate the top of a section/article (a la the top of a blog post), and a nav element can be used to indicate the sidebar menus, the footer menu, navigation within blog posts, etc.

      All of this improves semantics considerably and helps bots index your site (and your client’s sites assuming you have some) appropriately.

      So using your own quote:

      “I don’t care about semantics”

      then you shouldn’t BE a web developer.

  7. It will obviously work everywhere…

  8. Permalink to comment#

    We’re starting to do some really cool stuff with the canvas. It can really help you generate some fantastic infographics!

  9. “Not a big surprise that using the new semantic elements (like ) is the most common use of production HTML5. It’s easy, it’s hip, it feels good.”

    So the majority are *requiring* a JS shim to style those new elements? How are these sites looking without JS?

    • “How are these sites looking without JS?”

      A little bit “incorrect”, but usable.

    • Permalink to comment#

      If you care a lot about IE users with JavaScript turned off while you still want to use new semantic elements:

      http://www.debeterevormgever.nl/html5-ie-without-javascript/

    • ralcus
      Permalink to comment#

      “How are these sites looking without JS?”

      edit

      “How are these sites looking without JS on [if lt IE 9]?”

      Pretty messy and large parts unstyled, but it’s a comprimise i’m willing to make for the extra semantic goodness.

    • Might as well start the holy war eh? =)

      2% of U.S. users browse with JS off and about 1% worldwide (http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/)

      My guess: a large percentage of people do that on purpose and are aware of the issues that come with that.

      So: I really don’t care.

    • Jason
      Permalink to comment#

      Interesting Chris, I just checked your site in IE7 with javascript disabled and there was a nice easter egg in your yellow post it thing for the comments. Smile and frown… AKA drama? ;-)

      Like your sense of humor, but I have to admit I’m among those who do think all those using less then IE9 (in beta) are like it or not quite significant. Personally, semantics are great… but semantic elements alone IMO are not worth the trouble and hype to go with HTML5. Especially at this time. The reason semantics won the poll, is because no other feature in HTML 5 can be implemented on more than 50% of the browsers in use, more or less.

      I think its worth saying and that its good to stay in perspective. For example, I’m a teacher and from experience I believe it’s premature to recommend pursuing html5 for beginners. Adding the worries of progressive enhancement (or the opposite take your pick) to their already huge list of concerns is just not practical for all but the most die-hard techy types. Many people I work with are designers and would rather delve into code as little as they can. Not interested in fighting about it though!

    • Mark Ridgway
      Permalink to comment#

      If they are using ie with JavaScript turned on the are most likely use to sites not working. I generally code for the browser I use (firefox) and then make sure it looks comparable and usable in other browsers.

    • ckn
      Permalink to comment#

      I tend to agree with Jason in this case. I don’t think using HTML5 is that realistic for the vast majority of production websites. However, it’s a good idea to get prepared now for the future by experimenting on personal websites, sites geared toward industry experts and/or sites where users are definitely not browsing on IE8 or less. I am currently working on a redesign where 59% of the users are on IE and of that 75% are on IE8, 18% are on IE7 and 7% are on IE6. As cool as it would be to say screw it and use only the latest tools be it CSS3 and HTML5, I just can’t justify it when there are proven techniques avaliable that work well in all browsers with pretty decent semantics. Not to say the finished site will look the same in IE6 as in Firefox, but it will be pretty darn close. I know it’s totally uncool.

    • The ratio of users with disabled javascript is really low. you can read the discussion on this point here.

      http://www.smashingmagazine.com/2011/02/22/using-html5-to-transform-wordpress-twentyten-theme/

      Nowadays users who have JavaScript disabled are already having a really degraded web experience.

  10. Hi,,,
    This is very good post for the new developers. Html 5 is also very powerful as compaire to the last once. Html5 is easy to handle and also include some specification techniques that can change this different and strong to the last one.

  11. Permalink to comment#

    @Ian: Thank you for your link.

  12. Permalink to comment#

    I can’t wait to learn HTML5.. It’ll be fuuun!! Good link!

  13. Permalink to comment#

    surprised to see cross document messaging has little use. I personally think it is extremely useful.

  14. Simon
    Permalink to comment#

    *wonders how many of these ‘production’ sites are large corporate sites…

    Answer: Not many

  15. Permalink to comment#

    I’ve taken the idea to heart of using HTML5 for applications development
    and have been working on some serious projects centered around it.
    My current project is The “AsterClick AMI tool set” aimed at
    supporting the creation of HTML5 based applications for controlling
    the Asterisk PBX using webSockets.
    One of the components in the tool set even allows HTML5
    applications to be deployed as stand alone desktop executables.
    I’ve just about finished the first application that leverages that tool set
    which is something called a “HUD” that allows one to drag-n-drop phone calls, transfer calls, manage phone queues , teleconferences and the like
    So I really do see HTML5 having an important role in developing
    real commercial quality applications both on and off the web.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".