Some designers will embrace its arrival, others will simply dismiss its existence but the fact of the matter is that new technology in the web arena is becoming ever more apparent. “It’s too far in the future” some may scream, but either way we have all heard the hype around the next best thing in web development HTML 5.
Although it’s a big leap in what many designers are used to, it is something that all designers must accept will happen in the future. So why not learn the ins and outs of mark up such as HTML 5? Knowing something of this kind will not hinder your progress as a designer, simply give you the upper hand when “d day “ does come around and XHTML is something of the past.
Things like jQuery plugins, formatting techniques and design trends change all the time across the web. We accept that what we learn in this area today will change tomorrow. If this is the case with other coding techniques then why should we not accept this with the mark up we use everyday? Well, people become very comfortable with the techniques they learn in XHTML, the little tricks and tips that speed their design to build ratio. But from what I will describe in this blog HTML 5 may be worth the change over, if it’s time and tidiness we require. Transitioning from one syntax to another can be complicated or even make you feel that what you have learnt before was a waste, hopefully this blog can ease that change.
The Basics
The first main change is the doc type which every web site has the doc type code is
<!DOCTYPE html>
TO say the least this is not what we expected from a new syntax, but apparently…
<!DOCTYPE html5>
Triggers various problems in, yes you’ve guessed it IE6, but we must take backwards compatibility into consideration in most cases.
With HTML 5 this is as long as the new doc type gets, it’s small, its meaningful and for once in any designers working life including myself we might just remember this one, I feel that this improvement will banish the need for us to open up previous XHTML builds and copy and paste the doc type forever.
New Elements to get to grips with
Straight away new elements strike your retinas and in many ways make the sense of designing seem easier. In many ways the WC3 community has opened its ears and listened to what it is designers need. New elements that style the structure such as <header> and <footer> are now apparent along with <canvas> and <audio>. These simple looking structural elements seem to tap into an already powerful API - which in the long run allows us to create user friendly applications. We can now sleep at night knowing that our site’s audio doesn’t need to rely on copious amounts of flash work to seemingly stream an audio file. So let’s get to grips with the elements.
The new Structural elements
<header>
The header element contains introductory information to a section or page. This can involve anything from our normal document’s headers (branding information) to an entire table of contents.<nav>
The nav element is reserved for a section of a document that contains links to other pages or links to sections of the same page. Not all link groups need to be contained within the <nav> element, just primary navigation.<section>
The section element represents a generic document or application section. It acts much the same way a<div>does by separating off a portion of the document.<article>
The article element represents a portion of a page which can stand alone such as: a blog post, a forum entry, user submitted comments or any independent item of content.<aside>
Aside, represents content related to the main area of the document. This is usually expressed in sidebars that contain elements like related posts, tag clouds, etc. They can also be used for pull quotes.<footer>
The footer element is for marking up the footer of, not only the current page, but each section contained in the page. So, it’s very likely that you’ll be using the <footer> element multiple times within one page.
With one glance at these elements we can see no need for “div id=”mydiv”></div>, it would appear that the gold old div id is being forced into retirement. Much more than this elements like <header> or <footer> can be used multiple times on one page, something that was unheard of with div IDs. In this example the elements act more like classes and normal HTML that can be exhausted while style retaining a semantic structure.
One thing is apparent while looking at the elements in HTML5 and that is its ease and simplicity in creating a final goal. Like with any industry this is apparent, aerodynamics experts have one goal - to create something that reacts in a streamlined fashion to its environment. This also relates to design, if we can create something that overall reacts resourcefully to the net then why can’t we do it in far shorter steps than XHTML? HTML5 can do the above in a far more streamlined fashion than that of XHTML. When I look at the new mark up, I think faster, cleaner.
Easing the transition from good old XHTML
We can see that HTML, XHTML and HTML5 are similar in syntax, some small differences however can slip into your code and we can be faced with that dreaded “Document does not validate” in the official “failure red” colour. But on the plus side HTML 5 has some built in slack to let designers off a little bit, for example when marking up a form in HTML 5
For example , when marking up in HTML5 the proper syntax would be..
<input type="text" id="name">
But this is also accepted as valid code in an attempt to ease the pain for avid XHTML coders who in many cases are used to the “/”> elements. So even though we are using HTML5 we can still self close our elements like so.
<input type="text" id="name"/>
These rules will apply to <meta> <b> and <i>, these elements being left in makes the change far more easier to come around to.
What are some of the benefits?
People do not upgrade anything unless it has something to offer or at least one new feature. If your old code works just as well if not better than the new syntax mark up then why do you need to change over? Well, with HTML 5 a lot of new features are making their way onto the scene and changing the way we handle our online presence. Below are a number of new features..
Offline data Storage – With anything that’s web related that can be followed by offline storage we suddenly prick our ears up and listen. In this case HTML 5’s offline capabilities are amazing. Programs like Thunderbird, Outlook allow you to browse your data while offline, with HTML 5 you can have this feature function in the same manner but simply in your browser, some say this could be the first serious step in connecting both the desktop and web.
Video and Audio- The audio & video APIs are massive upgrades in media embedding. Although support is limited right now, something like video embedding has never been easier:
<video width="400" height="360" src="vid.mp4">
We can see from all of the above that HTML 5 is not at first glance evil but rather pleasing to use for a designer, for years we have complained about time management, and ease of coding. Here we are faced with a syntax that allows us to speed up our production and add elements that previously would have given us a headache. Further more we can see that is being kind to us who are XHTML savvy, by allowing us to ease into this new step in our design careers.
To Conclude
HTML 5 wants to help us, it wants to simplify the way we code in a way that can benefit both clients and the designer. But in most cases one thing is standing firmly in the way of evolution in the web arena and this is the foundations set up around XHTML, communities are rife with support for this syntax and this does not look to burn out anytime soon. But hopefully with HTML5 the expectations are being set up with strong intentions to become a very powerful mark up language, could this sway the masses?
With so many great features from new elements to API’s with enough power to change the way we view the net. We can make data available offline, easily combine technologies and create intricate animations all within a familiar landscape. We must as designers embrace the future, in doing so we can build stronger and richer web apps that do the internet justice.
