How to use HTML5 on your website today

What HTML5 features you can use now?

Smart forms. Another feature of HTML5 is smarter form elements. If you're tired of writing the same old scripts that check (again) to see if visitors entered valid email addresses (or valid telephone numbers, valid URLs, and so on), you aren't alone. It should be reasonable for browsers to handle the most common types of data entry, right? Right.

Here's the syntax:

<input type="email">

<input type="url">

<input type="number">

<input type="tel">

What about older/lesser browsers? Here's the cute part: If they see a type attribute with a value they don't understand, they set type to its default value, text -- which just happens to be what we'd want as a fallback for each of these.

HTML5-supporting browsers can validate each of these field types to varying degrees, but you'll still want to keep those validation scripts around, at least until IE9 is ubiquitous.

If you're wondering why bother changing if you'll still need those scripts, you've never filled out a Web form on an iPhone. If you have, you've noticed the keyboard change based on the type of input required: Email addresses get an @ sign up front, telephone numbers get a keypad, and so on. All you have to do to get that functionality is to change the type attribute on your input tags.

For even more smarts, there's a new attribute: placeholder. Its value is simply the placeholder text that you often see in Web forms, but now the browser handles it for you:

<input type="email" placeholder="Your email address">

The form field automatically clears itself when the cursor enters the field, and then redisplays the placeholder text if the field is empty when the cursor leaves.

What HTML5 features you can use soon

Not all of HTML5 is ready for the spotlight, for a variety of reasons (and no, they don't all have the initials "IE"). Browser support is coming, though, and here are two elements that you'll be able to use in the not too distant future.

Fancy fonts. At one point or another, every Web designer has wished that they could force every computer visiting their site to install some favorite font. With the CSS3 @font-face property, you'll have that power. The holdouts here were Firefox (before version 3.5) and Mobile Safari (before iOS 4). If you have enough visitors with those browsers, you may want to hold off for a while.

However, there's no real reason why you should be trying to make every user agent render your site identically when you can just offer different fonts to different browsers. If you want to offer custom fonts to those that can handle them, with fallbacks for those who can't, you'll want to check Font Squirrel's @font-face Generator.

Shadows and curves. Further designer-pleasing features coming down the road are text shadows, box shadows, and radial corners on boxes. Again, if you can handle your sites not rendering in a pixel-perfect identical fashion on every browser, you could start using these today. Here are some examples, with help from the CSS3 Generator.

Rounded borders (Firefox 3+, Safari 3.1+, Opera 10.5+, Chrome 4+, IE 9+):

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

Text shadows (Firefox 3.5+, Safari 1.1+, Opera 9.6+, Chrome 4+):

text-shadow: 5px 5px 3px #CCC;

Box shadows (Firefox 3.5+, Safari 3+, Opera 10.5+, Chrome 4+):

-webkit-box-shadow: 10px 10px 5px #666;

-moz-box-shadow: 10px 10px 5px #666;

box-shadow: 10px 10px 5px #666;

What HTML5 features you'll use, someday

This category consists of elements and features that Web designers and developers have wanted for many years. Unfortunately, it may be a few more years before there's enough real-world support to be able to use them.

Brilliant forms. I referred earlier to smarter forms, which makes these new form fields downright virtuosos -- when they're widely supported.

A horizontal slider control allowing a user to move the slider to pick a number:

input type="range" min="0" max="100" step="2" value="50">

A color picker:

input type="color">

A date field (other valid values for type are month, week, time, datetime, and datetime-local):

<input type="date">

If you need something that doesn't match any of these fields, you'll be able to create your own with RegExp (regular expression) patterns. Here's one for credit cards:

<input type="text" pattern="[0-9]{13,16}">

And finally, a way to tell browsers that a given field must have an entered value:

<input type="text" required>

None of these tags yet have the cross-browser and cross-platform support they'll need to be usable, but when that time comes, you'll be looking forward to them.

Print-like layouts. Another CSS3 feature, which when fully implemented will add years to the lives of designers, is multiple column layouts. It's currently implemented only as test cases in Firefox and Safari.

-moz-column-count: 3;

-moz-column-gap: 20px;

-webkit-column-count: 3;

-webkit-column-gap: 20px;

Location detection. With the growing interest in location-based services such as Gowalla and Foursquare, it's useful for a browser to know where its user is. For obvious reasons, this was first implemented in mobile browsers, but Firefox 3.5 and Safari 5 have begun to provide support for geolocation. (Chrome's geolocation support is currently via Gears, which is in the process of being phased out in favor of HTML5.)

Working offline, with local storage. Keeping your data in the cloud is a great idea -- until you find yourself without Internet access. Or maybe you have a Web app that works with large amounts of data, more than you want to be continuously shuffling back and forth to a server. Or perhaps you have a limited data plan on your mobile device, so you want to do as much work offline as possible. Whichever the issue, the answer is to utilize offline Web applications using local storage that sync back to the cloud when you reconnect.

The browsers that currently support HTML5's ability to work offline are Firefox 3.5+, Safari Mobile 3.1+, Safari 4+, and Chrome 4+.

Shortcuts to HTML5's bleeding edge

If you're too impatient to wait for IE8 to die of old age, there are a number of ways to skip ahead -- again, depending on what your site logs say about your visitors. For instance, Google's Chrome Frame plug-in puts an instance of Chrome into IE browsers. If you know your IE-using site visitors are likely to have GCF installed, you can then force its usage with this small addition to the head of your pages:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

That, plus a little JavaScript (provided by Google) to redirect users without GCF installed, is all you may need to work around IE's limitations.

The elements listed in this article are only a few of the ones currently included as part of HTML5 or CSS3. If there's a feature you just have to start using now, chances are good there's an open source project that is figuring out how to make it work for less-capable browsers.

Many of the media reports about HTML5 have focused on the politics, the "not until 2022" sound bite, or on HTML5's prospects as a "Flash killer." The reality of HTML5 is simply that it's the long-needed and long-overdue update to HTML4 -- and you can start to implement it today.

Join the newsletter!


Sign up to gain exclusive access to email subscriptions, event invitations, competitions, giveaways, and much more.

Membership is free, and your security and privacy remain protected. View our privacy policy before signing up.

Error: Please check your email address.

Tags internethtml5html 5

More about Adobe SystemsAppleGoogleMicrosoftMozillaW3C

Show Comments