Why a Web Designer Cannot (and must not) Ignore HTML5

written by aext on January 3, 2012 in Web Development with 3 comments

What could be the reason for the hoopla behind HTML5 ever since its launch? Is it just the over excitement of web designers or it is more than that? Well, let’s dissect through the clutter created by bunch of critics (some of whom I respect a lot) and understand why HTML5 is more than just another markup language.

HTML5 cannot be tagged as an upgraded version of her grandparents because HTML5 is quiet a broad term. It encompasses not just the basic markups we are aware of, but it also covers completely revised markup specification that comes loaded with new features like canvas, video, geolocation and audio. The new features of HTML5 make the addition of graphical and multimedia content a cakewalk. A web designer can stay away from various forms of APIs and Plugins once HTML5 lends her helping hand.

Geolocation (in action)

Geolocation is part of Internet since years but HTML (versions older to HTML5) was shying away from the same. With the launch of HTML5 geolocation is now talk of the town (and very easy to implement.) The geolocation feature of HTML5 will work fine only if the user gives permission to the browser that runs HTML5. Once permitted, HTML5 will use one of the multiple sources like RFID, IP address, MAC address etc. to determine your location.

Check geolocation in action at HTML5Rocks.


Video & Audio (without using frames or scripts)

I remember the hours that I have spent searching for the best available JavaScript that would run an audio file smoothly on my website. With the advent of HTML5 life is going to be overly easy for web designers.

<video src=”myvideo.mp4″ autoplay controls></video>

document.getElementById(“video”).play();

The two lines of HTML + JavaScript above will do the job of running a video on your website. Similarly, the two lines of HTML + JavaScript below will run an audio file directly on your website.

<audio src=”myaudio.mp3″ controls></audio>

document.getElementById(“audio”).muted = false;


Preload Videos (but with care)

Did you already guess what Preload Videos will do? You are right! Preload videos will load the video before the page loads thus the website visitor won’t have to wait for the video to buffer. With this feature comes the requirement for website designer to do some analysis in order to understand the real website visitor.

Please be aware that preloading a video might just slowdown the website. To cover that up you will have to display some loading timer so that the visitor knows that he didn’t hit a dead end. To preload a particular video you can use the below attribute:

preload=”preload”


Cleaner Doctype

<!DOCTYPE html>

Ain’t that short, sweet and awesome? HTML5 saves you from the pain of using the overly lengthy XHTML DOCTYPE that was of course impossible to remember. Browsers that don’t understand the simpler form of DOCTYPE will render the respective markup in regular mode.


Edit content on the fly

Use the newly launched “contenteditable” attribute to make your live content editable while it is being displayed in a browser.  Simply use “contenteditable” as an attribute with the element that you want to make editable as show below:

<ul contenteditable=true>

Above code will make everything in between <ul></ul> tags as editable. Cute?


Email validation (without JavaScript)

Remember the days when you would use loads of JavaScript for form validation. If the end user enters text which does not look like an email address in the email address field then that JavaScript will ask the user to enter a valid email address. Well, HTML5 will do that for you without any JavaScript.

<input id=”email” name=”email” type=”email” />

See the type=”email” in code above? It does all the job of checking for a valid email address. It will display a warning if text which isn’t actually an email is displayed.

Please be aware that some of the old browsers might not recognize this new feature, henceforth they will consider the field as regular text field. Hold your breath and let the Internet upgrade!

Life, for sure, is going to be very easy for webmasters once HTML5 is understood by all possible web designers.