Would you ever expect to hear computer code being compared alongside automobiles? Me either. But in many ways HTML5 and CSS3 are like a new car—faster, cleaner, more efficient, and with some pretty sleek curves.

There have been a lot of developments to HTML, but the biggest addition award would have to go to the ability to handle audio and video. Gone are the days of having to use a Flash video player, or a clunky Java-based video plug-in to handle your audio and video. This means that if one of the dominant features of your home page is a video, that it will now.

Implementing a basic HTML5 player on your website can be quite simple, but most developers want more than basic. They want the look of the video player to match seamlessly with the site, or they want the controls to look a certain way. They may have a vision on how they want the player to function, or they may just want to add keyboard shortcut keys. All of these things are possible, but involve a great deal of Java coding. One thing I would consider doing before writing thousands of lines of Java would be to see if there’s already an open source solution to what you want—this will save you a great deal of time and ultimately keep the cost lower for your client.

There are a handful of free video players out now that use HTML5 as their platform, some of which provide Flash or Java player fallbacks. LeanBack Player is a pretty nifty player that fits in to that category. LeanBack Player has keyboard shortcuts programmed in to it and has been tested on all major browsers as well as iOS 3 and later, and has an Android fallback.

Video JS is another free HTML5 video player that’s compatible with most major browsers and mobile platforms.

One thing worth mentioning, and something that may keep you from spending days ripping your hair out, is to be aware of what video format you’re working with. If your video is compressed in a FLV format and you’re trying to test it on your iPhone, it’s not going to work because FLV is a Flash-based video format. If you’re looking for a video format that works on your iPhone, iPod, or iPad, you’ll want to use a H.264 MPEG-4 video format with AAC audio.

HTML5 has also introduced a whole slew of new elements to assist your pages structure. Some of the new and noteworthy include <article> tags for handling self-contained text areas, <header> and <footer> tags for the opening and closing of your pages structure, and a <nav> tag for your navigation. They’re simple additions, but they make life much more pleasant when developing.

Rounded Edges With CSS3

For me the real gem isn’t so much HTML5 as it is the markup language’s stylish wingman, CSS3. Lucky for me, all the hair I ripped out over the past few years trying to design a lightweight website that had rounded corners grew back. Now, thanks to CSS3, that’s as easy as a few lines of code.

     -webkit-border-radius:7px; /* Safari and Chrome */
     background: #e0e0e0; /* Old browsers
     background: -moz-linear-gradient(top, #e0e0e0 0%, #666666 59%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(59%,#666666));
      /*Chrome,Safari4+ */
     background: -webkit-linear-gradient(top, #e0e0e0 0%,#666666 59%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(top, #e0e0e0 0%,#666666 59%); /* Opera 11.10+ */
     background: -ms-linear-gradient(top, #e0e0e0 0%,#666666 59%); /* IE10+ */
     background: linear-gradient(top, #e0e0e0 0%,#666666 59%); /* W3C */

You may notice that the code you pasted from the ColorZilla site is miles longer than what I’ve written above. No need to panic, I just removed some of the longer lines that deal with older versions of IE in an attempt to not overwhelm you.