An Exploration of HTML 5

HTML 5 Fist
Photo from justinsomnia
Original t-shirt version

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?

HTML5 is a container term used to describe a technology bundle that makes up the new standard. What HTML 5 really encapsulates is HTML 5, CSS 3, and JavaScript all thrown together into the pleasantly marketeering term that is HTML 5. Did you look at those links above in Internet Explorer? Well I'm afraid you're out of luck for the time being. The A-grade browsers that are currently supporting some of the features of HTML 5 include Safari, Chrome, Firefox and Opera. Still want to use HTML 5 in IE? If you simply put the term "HTML5 elements in IE" (linked directly to Yahoo! Search because I know you all use it right?) into your favorite search engine you'll get a nice wrapper on how to do this.

Let's explore a few of the great improvements coming in HTML 5:

Grouping Tags
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:

  • Sliders: Creating a simple slider within a form is as simple as defining <input type="range" ...> - no more JavaScript needed.
  • Auto Focus: If you need to autofocus the user directly on a part of your form when they first come to your site (plea: please don't) then the autofocus parameter of an input field is ready to do the dirty work. Simply use the format <input autofocus ...> and you're ready to go. This standardizes the approach so that websites no longer have to use a level of JavaScript interaction to accomplish the same task.
  • Placeholder Text: In an input field, it's sometimes neccessary to guide your users to input the values you expect, using the value attribute (e.g., add mm/dd/yyyy for them to define a date). This usually involves adding a click event with JavaScript such as this.value = "" to purge the input when the user clicks on it. Then you need some alternate logic to put the placeholder back when the focus is no longer on the input and the user didn't type anything. This is where the placeholder attribute comes in. Using the form of <input placeholder="some text" ...> the input box will take care of this for you. You have a populated value of "some text." When the user clicks on the input it disappears, then reappears when the user clicks off of the input and there is no text. Simple yet brilliant. (Currently works in 2 browsers.)
  • Calendar Picker: Prior to HTML 5, calendar pickers in forms were non-standard and usually involved some fairly hefty JavaScript components or libraries to build the functionality. In HTML 5, we have a new input type called datetime, used in the form of <input type="datetime" ...>. This generates a standard input form for the user. When a user clicks on it, it pops up a calendar picker widget automatically. Less code is always a win.
  • 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.

Simply put, forms make sense now. No need to heavily augment a form with layers of visualization and JavaScript just to allow data to be defined as it should be in the first place, or to allow base levels of functionality that everyone uses anyway. If you want to see what your current browser supports, take a look at www.miketaylr.com/code/input-type-attr.html.

Accessibility
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.

Web Fonts
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
HTML 5 video tag screenshot from YouTube
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
Have you ever wanted a blank canvas where you could programmatically draw anything within a website or web application? Well there are a number of server-side languages that do this - but have you ever wanted to do this through scripting (with a little bit of embedded JavaScript)? Well that's where the <canvas> tag comes in. There are many canvas demos available for you to see exactly what can be done with the canvas tag by typing in "HTML5 canvas demos" in your favorite search engine. The code for creating a canvas and working with it is also very simple:

Using JavaScript, you can draw on the 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:

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.

Jonathan LeBlanc
Technology Evangelist
Yahoo! Developer Network
Twitter: @jcleblanc