At the Confoo.ca conference in Montreal, Quebec, Mark Pilgrim of Google gave an impressive keynote providing an overview of the current state of HTML 5. The information in this post was inspired by his comphehensive talk. Are you wondering what is currently available in HTML 5 and if you can start using it? Take a look at ishtml5readyyet.com or ishtml5ready.com to get your answer.
If you take a look at ishtml5ready.com in a browser that supports HTML 5 you'll see that HTML 5 is somewhat ready. That is, some browsers provide some current support for HTML 5. But that shouldn't stop us from playing around with it right?
Let's explore a few of the great improvements coming in HTML 5:
There are a number of new tags available for all of your tag grouping needs. <hgroup> is used for defining logical groups of tags or sections on your page, <nav> is present to define navigation systems - great for search engines to easily define your site structure. Tags such as <section>, <article> and <aside> can be used for data grouping. Properly using these tags can help you easily define the sections and most important content of your page. This helps search engine crawlers pick up the structure of your website.
Form Elements and Attributes
Forms have received quite a nice overhaul in HTML 5 with new features and methods for defining what data truly is. Let's take a look at these changes:
- Multiple File Uploader: Extending upon the file type of an input field, a new "multiple" property implementation allows you to specify multiple files for upload and takes the form of <input type='file' multiple ...>. When selecting multiple files, you should display "N files" in the input box, instead of the single filename. (Currently works only in Safari.)
- Yet More Input Types: There are even more input types that you can logically define. type="email" and type="url" are definitions you can explore to define the data that users will input into your forms.
HTML 5 has not forgotten about improving web accessibility. ARIA (Accessibly Rich Internet Applications) defines methods for building websites and web applications in a way that make them more accessible to people wth disabilities. One way HTML 5 endeavors to improve ARIA capabilities is through the use of the role='group' attribute, which will allow screenreaders to properly define group content. For a more comprehensive look at common ARIA attributes, take a look at dev.w3.org/html5/markup/aria/aria.html or search for "ARIA accessibility" in your favorite search engine.
From the time I first started developing web applications I knew that font support was a joke and never functioned as it should have (great idea - bad implementation). Well, this fact is no longer true, I am happy to say. Web fonts finally work, allowing you to define your own font faces, even if all browsers have different implementations. For more information, take a look at Paul Irish's post: Bulletproof @font-face syntax.
Video and Audio
Video is now scriptable, folks. With the new <video> tag, you'll be able to include a video player, implementing ogv & mp4 formats. You can now use DOM scripting to control video - mute, forward, stop - all through the DOM. The <audio> tag is there as well, to include audio files easily. If you want to see the video tag in action, go to youtube.com/html5 to opt in to HTML 5 standards beta. YouTube will not use the Flash player when video tag support is available in the browser and uses the HTML 5 video player instead. The video tag may be styled in exactly the same way as you would see with the standard Flash video players out there.
Freeform Drawing with Canvas
More Information and Links
We've just scratched the surface of HTML 5 and all of the new functionality. There are some great resources available if you want to explore even further:
- Current HTML 5 Draft Standard - http://whatwg.org/html5
- Dive Into HTML 5 by Mark Pilgrim - diveintohtml5.org
A big thanks to Mark Pilgrim for his talk at Confoo. I look forward to seeing the standard expanded and adopted by all the browsers out there.
Yahoo! Developer Network