HTML5 is the latest version of HTML markup language. Practically, for most of us HTML equals to the World Wide Web. Several years ago W3C, an international organization of web standardization, established an HTML working group in order to bring classic HTML to a new level, which is known as HTML5.
HTML5 tries to destroy borders between browsers rendering and unify user experience on the Internet. The main goal of the new markup language is to make dynamic and rich media content available on all browsers and devices. But the technology steps much further, than just a markup. In fact, HTML5 may become a universal technology that is suitable for multimedia players, mobile websites, web apps and online games. By now HTML5 technology has a sufficient toolbox for these tasks. Obviously, HTML5 pretends to be a real alternative to Adobe Flash in each sphere: video, gaming, web apps, etc. Let’s see what is better for web design and users.
HTML5 Video & Audio Playback
Thanks to HTML5, people can forget about annoying Flash plugin updates and sluggish Flash players. HTML5 introduces a special <video> tag which handles video playback without any add-ons from the end-user side. Look at a video player code sample for HTML5:
<video width=”320″ height=”240″ controls=”controls”>
<source src=”movie.mp4″ type=”video/mp4″ />
<source src=”movie.ogg” type=”video/ogg” />
<source src=”movie.webm” type=”video/webm” />
Your browser does not support the video tag.
</video>
As you can see the HTML5 code has a much simpler structure than Flash-based code taken from YouTube:
<object width=”560″ height=”315″><param name=”movie” value=”http://www.youtube.com/v/7SvDTL4ZMz4?version=3&hl=en_US&rel=0″></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/7SvDTL4ZMz4?version=3&hl=en_US&rel=0″ type=”application/x-shockwave-flash” width=”560″ height=”315″ allowscriptaccess=”always” allowfullscreen=”true”></embed></object>
However, HTML5 approach to video playback has its pros and cons.
On the one hand, HTML5 video is a real pleasure for users. They do not have to install and configure anything. There are no unfriendly messages “your Flash player is outdated”. Besides, users do not have face Internet scammers requesting to download a new video plugin from an unknown site. Unlike Flash player, HTML5 eliminates the need to deal with security questions. Its counterpart is notorious for virus attacks.
On the other hand, the main burden is shifted to web developer’s shoulders. With HTML5 deployment, you have to convert each video file into all 3 formats: OGG, WebM and H.264. A .flv or .swf video file will not be enough anymore. But don’t be scarred. There are free video converters that convert video to HTML5. For example, Freemake Video Converter or online Media Converter. Another way to go is to take advantage of ready HTML5 video players. Look at 11 HTML5 video players we reviewed earlier. Most of players are powered by JavaScript, so you will spend less on coding yourself.
The similar situation regards a new <audio> tag. Thanks to it you can embed an audio track onto your website. HTMl5 supports the following formats for audio files: MP3, M4A and WebM audio. The code looks a like in video case. To facilitate audio processing, there are helpful HTML5 audio players you may need: jme, MediaElements.js, and jPlayer.
HTML5 Cross-browser and Mobile Websites
HTML5 gives more freedom to webmasters. As you know HTML5 claims to be a cross-browser solution. That means a user can access your site from any browser (Internet Explorer, Google Chrome, Mozilla Firefox, Opera, Safari) and have the same experience at all of them. But at this point the technology has limitations. HTML5 is supported only by the most recent web browsers. If we take Internet Explorer, for instance, there’s no chance to enjoy HTML5 content on old-school Internet Explorer 6, 7, or 8. HTML5 is locked at the 9th version of Microsoft web browser. To cut the long story short, if your visitors come from Internet Explorer 7, they may lose a significant part of your content.
Per contra, owners of mobile gadgets can finally reach rich media content available in HTML5 format. iPad, iPhone, Android gadget holders may watch video, listen to music, interact with your web interface or utilize your online app in the same manner as they do it on a desktop browser client. But it doesn’t mean designers shouldn’t create special design for mobiles or use free PSD mobile UI designs.
HTML5 Canvas
Meanwhile, the key HTML5 benefit for websites seems to be clear – various device users get better content and decent user experience. In order not to sound proofless, look at a dozen of HTML5 galleries that collect original websites. They stand out by its creative design, aesthetics and interactive elements. The last category is based on <canvas> tag and JavaScript. This powerful union provides astonishing design capabilities and an unusual site style. If we speak about <canvas> tag precisely, it’s an absolutely new tag introduced only in 5th edition of HTML markup. <canvas> tag strives to turn a static web page into a dynamic layout. The famous example of canvas usage is Google bouncing balls doodle or Sketchpad online painting application. To learn more about canvas, visit Mozilla tutorials for developers.
HTML5 for Games and Apps
HTML5 also tries to conquer one more Adobe Flash territory – online games and apps. For many years online games were strongly associated with Flash technology. But with fast growth of mobile platforms and iOS, game developers see the demand for more flexible solutions. Here the easiest tool is HTML5 deployment. Once again, the HTML5 games performance is based on the mix of canvas and JavaScript. Such web exhibitions as html5games.com and www.html5-games.info feature plenty of HTML5-based games of all levels: casual like Angry Birds, simple like Tap the Frog and more advanced like Temple Run. The web nature of these games means that all HTML5 opportunities for gaming industry are not discovered yet and still there’s a space for creativity and inspiration.
HTML5 Future
HTML5 may seem an ideal web future, though there are a few drawbacks that stop its quick spreading around the globe. First of all, it lacks guidelines. For the last 5 years the web community discusses possible and acceptable guidelines. But they fail to come to a real document which describes HTML5 markup use and principles. Secondly, the main players on the market such as Google, Apple, Facebook or Twitter have different attitude to common web development, so they cannot lobby unified HTML5 principles. This unclear situation prevents many smaller web agents from active HTML5 promotion. Even now with lots of HTML5 tools, designers and web developers prefer to wait and see what’s going to be the next with web technology.