Reasons for You to Switch to HTML5, and Examples that Further Advocate it
A virtuoso stretch of innovation, HTML5 is indeed a technology that has brought new blood to the genre of website development. Whether you want your website to boast shape-shifting functionalities or you wish it to flaunt an overwhelmingly beautiful visual appeal, HTML5 does the job for you, and in a manner most formidable.
While this platform made its foray into the web development realm quite a while ago, there is no dearth of webmasters who don’t have it in their list of “top 3 preferred tools” when it comes to building a website. And a large chunk of these webmasters are already using other platforms for their website, thus, making compromises on an array of features that HTML5 could have integrated their websites.
1. It Gives Free Reins to the Creative Souls
Innovation is the hallmark of the greatest designers and developers, and when a tool comes along that lets them exercise their creativity without bounds, it has to be endorsed. HTML5 fits the bill perfectly, and in the soundest fashion. As a web development framework, HTML5 is super customizable, thus letting designing professionals to express themselves. So, when being ahead of the curve is on your agenda, the HTML5 wagon is there to catch.
2. The Much Improved Video Support is there for the Taking
The video support has been greatly enhanced with the new HTML5 embed video for the browsers. Since not all browsers support diverse formats of the likes of H.264, when you wish to display an HTML5 video, you must use the following:
<video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<p>Your browser does not support the format. <a href="cohagenPhoneCall.mp4">Download this format.</a></p>
</video>
3. It Lets You Make Websites “For Mobile”, Instead of Compelling You to create Multiple Versions
Log in to your site’s analytics, scratch the surface a little and observe the OS platforms you are getting most of your visits from. You will be surprised to see that the majority of your visits come from the mobile users, as opposed to the figures that existed a year ago, when you probably had more number of desktop users on your website. Thus, making a website for mobile is much more recommended than making a desktop-centric website and then creating a mobile-friendly version of the same. And HTML5 makes it a highly efficient exercise to create made-for-mobile websites that retain their ocular appeal when accessed on smaller screens and adapt to the reduced size without tossing compatibility or responsive issues at you.
4. Convoluted XHTML doctype Makes Way for a Easier, Less Cumbersome Version
To put it without equivocation, the XHTML doctype has not been viewed passionately by the developers’ community. And the reason for the same is more than apparent with how it’s written as:
<!DOCTYPE html PUBLIC "-//KKK//DTD XHTML 1.0 Transitional//EN"
"http://www.xyz.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5 has made the declaration much more shorter and comprehensible for the developers:
<!DOCTYPE html>
5. Attributes Can Detect More Intuitively
First and foremost, the attributes you use in your program should be able to seamlessly determine if they are being detected appropriately by the browsers. HTML5 gives these attributes the wherewithal to do exactly that. With the Modernizr library proves to be resourceful tool but there are other ways like creating the elements before they are dissected. This way, it will be easy to evaluate browser capability.
6. It Does Have its Set of Fixes for IE
Ah well, Internet Explorer is viewed rather dispassionately by the Internet community across the globe, and for reasons very much justifying. As expected, IE has its own problems dealing with the new elements that HTML 5 pours in. therefore, styling these elements in a way so that they become more comprehensible for this browser is important to give s sense of structure to the way the HTML5 elements are aligned as block level elements:
header, footer, article, section, nav, menu {
display: block;
}
Now, there is every possibility that Internet Explorer will continue to to be a pain as it may not be properly acquainted with the header element. So, the styling in the HTML5 stands at a risk of being blatantly ignored. That said, there is an easy solution for the same:
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("nav");
document.createElement("menu");
7. Geolocation
Geolocation is undeniably the catch-feature of HTML5. What it does is that it tosses at you the mathematical values that represent the coordinates of your user’s location. These location coordinates are calculated using the browser that the visitor is using to access the website.
8. Code that is Clutter Free and Much More Comprehensible
It is always recommended to write programs that are clean, easy to comprehend and written in a manner most reusable. HTML5 makes all this possible, and more by facilitating a code that is highly synchronic, semantic and gives you the freedom of drawing a line between style and content for them to be easily understood. A standard header code with navigation looks like this:
<div id="header"> <h1>Header Text</h1> <div id="nav"> <ul> <li><a href="x">Link</a></li> <li><a href="x">Link</a></li> <li><a href="x">Link</a></li> </ul> </div> </div>
While you might argue the code is simple enough, but let’s see what HTML5 can do with it:
<header> <h1>Header Text</h1> <nav> <ul> <li><a href="x">Link</a></li> <li><a href="x">Link</a></li> <li><a href="x">Link</a></li> </ul> </nav> </header>
Apparently, HTML5 adds a lot of sense of structure to the whole code by making it more elucidatory and using the HTML headers better represent your content.
9. You Don’t Have to Deal with ‘Type’ for Scripts & Links
There is no dearth of web developers who are leaned heavily towards the Type attribute, particularly when they need to leverage the tags of scripts. With HTML 5, you can cure your Types, rather remove them altogether. The code as a result becomes descriptive.
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>
With the set of features highlighted above, it is not hard to deduce that HTML5 is here to alter the web technology sphere in a manner most dominating and influencing. And it has already powered some of the most amazing websites and themes on the Internet.
Excellent Examples Of Powerful HTML5 Websites
The following examples further advocate the fact HTML5 is here to make powerful waves of change:
1. Ghost Writer Art Studio
Ghost Writer Art Studio may not boggle your mind, but it is sure going to make a strong statement, thanks to the clever designs that happen to be catchy, to say the least. The HTML5 tools have lend it an appeal that’s hard to match.
2. Cantina Valpolicella Negrar
The website for Cantina Valpolicella Negrar creates a vibe that’s hard to shrug off, rather a vibe you want to stick around. The HTML5 functions are most intelligently used for this minimally designed websites that makes maximum impact.
3. Waterloo : The Film
The website plugs you right into the battle, no need for time machine. It does its job of giving you a glance into what the movie is all about exceedingly well with its fine use of colors, layout, positing of elements and more.
4. Zizzi
If you are yet to believe in the age old adage, “a picture speaks a thousand words”, this one will most definitely convince you. Powered by HTML5, the website for Zizzi is a fine testament how creativity coupled with a powerful platform can create magic. Created by the much reputed agency, Propeller Communications, this one makes sure that the Geolocation API feature of HTML5 is abundantly used.
5. Water Canvas
And then there is that! Water Canvas is breathtakingly beautiful, but focus has also been drawn on the responsiveness of the website. The textures and the overall layout combine well enough to make this piece stand out.
6. Lardini
The Lardini website has enough fashion to speak for itself and for the brand. HTML 5 indeed gave its designers and developers a whole ensemble of tools and capabilities to exercise their creativity in the most freewheeling and potent of fashion.
These examples should give you an authentic cause for pause and further boost this growing traction towards HTML5; something which will only hold the web development technology in good stead.
An excellent tutorial, very clear and a fantastic outcome, thank you very much.