HTML5 in Drupal
Published by Scott
Last weekend at DrupalCamp Colorado, I did a presentation on HTML5 in Drupal. You can view the slides for the presentation if you missed it, or want to see how some of the examples work outside Safari. The slideshow itself is HTML5-based, using the HTML5 Slides project from Google.
Since the presentation, I've heard of a few Drupal projects I didn't include in the slides: Geolocator uses HTML5 geolocation and was added just yesterday. Plupload uses HTML5 video and drag-and-drop, also added just yesterday. Someone in the audience during the presentation also mentioned another module that uses HTML5 functionality, but I've since forgotten what that was. If you were there and remember, or know of any other tools in Drupal using HTML5, please leave a comment.
It's exciting to see the Drupal community getting into HTML5 more, and I hope to see a lot more of that. As I mentioned toward the end of the presentation, there's still a lot of confusion about whether or not it's okay for Drupal to use HTML5, since everything in core uses XHTML 1. To clear that up one more time: HTML5 is allowed in Drupal, and should be encouraged. Drupal 7 co-maintainer webchick has weighed in on the topic:
I think this is a great thing, and helps put Drupal out front as a leader in pushing forward web standards and new technology, and also tests the waters for things that Drupal core could be doing in the future, to help enable global spread of these tools.
There will be issues that come up using HTML5 in Drupal, of course, just as there are with anything new. By discovering and dealing with those issues now, we'll be well-equipped to use HTML5 going forward. The web isn't going to wait for Drupal to get comfortable, so it's important we get out in front of these changes rather than struggling to catch up. There's a ton to learn about HTML5 (I only scratched the surface in an hour), but the first step is incredibly easy. Is your Drupal site using HTML5 yet?
Great Post Scott,
It would be nice to comment that HTML5 slides you need to press -> (right arrow) in the keyboard to go forward.
More here http://slides.html5rocks.com/#slide1
Thanks, Corbacho. That's actually a great example of the kind of accessibility issues we need to look out for when starting to use HTML5. I didn't really think about that when I was the only person using the slideshow, but keyboard-only navigation doesn't make sense on the wider web where people use different devices. I'll definitely make sure the slideshow includes basic links for navigation next time.
The important thing to consider is what we'd gain, and what we'd lose from the shift.
I don't think there's any problem with adopting new HTML5 tags and CSS3 right now as long as we stick to best practice (progressive enhancement etc), but there has to be some gain from it.
We're gonna start our web development business using drupal 7 and html 5. As far as I can see at the moment, there shouldn't be any issue with drupal core using xhtml 1 as we're gonna use that syntax anyway with html 5 in order to be able to send it as application/xhtml+xml for browsers that support it (apart from a few tags that are deprecated in html 5).
adrinux, sure, but there also has to be some gain in conducting such cost-benefit analysis. At some point it's more efficient to jump in, and I'm arguing that point is now (or even past) with HTML5. There have been plenty of examples already demonstrating HTML5 is a big deal. If we wait until we understand exactly what kind of a big deal it is, we'll be following rather than leading.
It's incredibly easy to find discussion of what we gain, less so what we might lose. The new spec was designed around existing browser behaviors to minimize incompatibility with the pre-HTML5 web, so I don't expect much loss (and haven't experienced any in using it so far). What specifically are you worried about?
I have been trying to submit a new HTML5 video module for well over a month now with no luck:
http://drupal.org/node/803312#comment-3157774
I believe it provides a fresh and simplified approach to enabling the use of the new video element as a formatter on a CCK field.
Really nice to see others getting heavy into HTML5 - I agree the time is right to start pushing forward with this new technology as there's very little to loose and a whole lot to gain. We're working on the Drupal 7 version of our starter theme which uses HTML5, the only tricky dowside might be validation (its tricky to validate due to RDFa and the required PUBLIC doctype we must use when supporting RDFa), in any regards validation is a bit moot (HTML5 is liberal) and we're using a lint tool instead.
The theme is Adaptivetheme 7.x - try it out, love to hear feedback in the issue queue.