O'Reilly

HTML5 Tutorials

  • File Input accept Attribute

    The HTML5 revolution provided us several simple but important attributes like download, autofocus, required, novalidate, and placeholder.  There's another one you may want to know about:  accept.  The accept attribute is useful for input[type=file] elements.  Let's have a look at it! The HTML I'll...

  • Get HTML5 Camera and Video on iPhone

    One of the questions I get asked most often via my contact form is how to get access to the camera and video recorder on the iPhone from within the browser.  It's a valid question, one that I've not come across in the needs of...

  • fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • File API

    Working with file uploads, especially on the front end, was always a hassle.  We didn't use to be able to drag and drop files, complete AJAX uploads, provide multiple files, and hell, we couldn't get any information about the file until it hit the server; you'd...

  • Get and Set HTML5 Video Current Time

    Last week I explored how you could get the duration of a HTML5 video.  It's an important technique, obviously, but one that may be a bit more important is managing the video's time setting.  Both setting and getting the video's time is important when creating a chrome...

  • HTML5 Form novalidate

    I've been very skeptical when it comes to HTML5 form validation.  It's a nice addition, don't get me wrong, but let's be honest -- it's not very powerful and it could get in the way of the JavaScript validation you have in place.  If you want HTML5 form validation to...

  • From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

  • The Difference Between Anchors, Inputs and Buttons

    One of the things I love about CSS is how easy it is to make one element look like another. In the example above, the first element is an anchor, the second is a button and the third is an input. I've overridden the...

  • HTML5 Input Types Alternative

    As you may know, HTML5 has introduced several new input types: number, date, color, range, etc. The question is: should you start using these controls or not? As much as I want to say "Yes", I think they are not yet ready for any real life...

  • 8 HTML Elements You’re Not Using (and Should Be)

    In today's web, the word semantic gets thrown around a lot. But what does semantic mean? Why is it important? Semantic HTML expresses the meaning of the document. It's less about how the text looks and more about what it is. Good semantic markup helps both people...