Winnipeg Web Design

Top 4 HTML5 Features

You’ve undoubtedly heard of HTML5 multiple times in the past. It was started in June 2004 and is currently in the ‘Working Draft’ state. Ian Hickson (a Google Inc. employee) is the editor of HTML5, and he estimates that HTML5 will become a Candidate Recommendation in 2012, and a W3C Recommendation in 2022. Seems like I’ll be old and gray by the time it’s the norm!

The great thing is that despite the fact that HTML5 will not be a W3C Recommendation until 2022, you can use many of the elements of it today! The website caniuse.com reports that this percentage of features in HTML5 are currently supported:

• Internet Explorer 8.0: 25%
• Firefox 3.6: 76%
• Safari 5.0: 86%
• Google Chrome 5.0: 85%
• Opera 10.6: 77%

I’ll be using Safari 5.0 as it currently has the highest percentage and seems to run the best in my current setup. Let’s dive right in, shall we?

1. Geolocation

Geolocation is already being used all over the web today. Many websites will ask for your current location to display information like weather or local news. Some or all of your information including your IP address, RFID, MAC addresses, GSM/CDMA information will be used to determine your information. It can only be used if the user gives permission.

Try it here.

2. Video

One of the main reasons why Apple is not supporting Flash on any iOS devices is because they believe so strongly in the HTML5 Video element. It couldn’t get any simpler than this markup:

<video src='movie.mp4' autoplay controls></video>

Provided the feature is fully supported, video plays smoothly, fullscreen works great, and it doesn’t eat up your CPU cycles like some HD flash players can.

Try it here.

3. Canvas

Creating simple graphics for the web in Photoshop then saving and inserting them in the correct place in your web page can be a complete time waster, especially if you get it wrong and have to go through the whole process again. That’s where the Canvas element comes in.

Take the simple ‘loading’ image. Instead of searching high and low for the perfect looking image, you can create exactly what you want with a canvas element. Here’s an example: link.

4. @font-face

@font-face is really more of a CSS feature, but it ties in directly with HTML5. Inserting custom fonts into web pages is always a pain. My tool of choice is Cufón, for its sole use of JavaScript. There are others that get more complicated like sIFR using Flash all to get a font on a web page. No more! Custom Web Fonts are now as easy as uploading the .ttf or .otf file to your server, linking it into your CSS file and creating a font-family, and displaying your text! Typography lovers unite!

@font-face {
font-family: 'LeagueGothic';
src: url(LeagueGothic.otf);
}

header {
font-family: 'LeagueGothic';
}

Try it here.

All of the demo links included in this post are courtesy of Google, Inc. Check out the rest of html5rocks.com for some great resources!

These four features are just a taste of what HTML5 really can do. I look forward to what the world’s web developers will be making in the years to come!

Related posts:

1. HTML5 Overview
2. Google Launches a New Font API
3. CSS Line Break Bug (screencast)
4. Reading XML Using Flash
5. Firefox 3 advancing, but IE6 not going away…

Written by Dixon Crews

Hey, I'm a high school student who really loves web design and development from North Carolina. I'd love to go to school to learn even more about design, possibly computer science, and eventually having a job designing and developing websites! Twitter | Website