I remember shivering in my college dorm room trying to figure out how to get some weird /div to float in some sort of column like structure and silently crying a single tear as my youth slowly withered away. Those days are gone!

With the birth of Firefox, the step-child banishment of Internet Explorer 6 and widespread adaptation of standards… life indeed has become much cheerier for us front-end web developers. What could be better than that? HTML5 coming to a browser near you! Scratch that, they’re now playing.

CC Photo Source: lilivc

This article is a brief introduction to what we can expect in HTML5… from a designer’s perspective.

When Is It Coming Out?

The truth of the matter is that the governing bodies behind HTML take years to deliberate what officially goes into the spec… or not. They have a committee of Jedi-level developers who recommend additions, deletions and refinements of existing spec. This takes years of submitting, re-working, compromising and blood and sweat and tears and dragons eggs… you get the point.

However, the browser industry comes out with new major versions every year because their market is so competitive. They don’t wait for the specs to reach final, approved status because they don’t have to! A lot of the recommendations are good ideas that have been around for years and the browser makers deem it necessary to move forward to bring the best user experiences to the masses. So they proactively insert the new specs for the developers to start using some of the new features for everybody’s benefit.

Progressive Enhancement

No images of old dudes in bath tubs here, we’re talking about making cutting edge websites. Sorry, couldn’t help the “Enhancement” joke..

There is no need to wait. If you know what browsers you are programming for, you can start incorporating the new techniques right now. Obviously, pay attention to your target demographic and what browser they will likely use and the target industry. Stay the heck away from HTML5 obviously if you’re working for an institution that doesn’t update browser software regularly like at some hospitals or government agencies.

Regardless, I believe that it is up to us web developers to take into our own hands what the future of front-end web design and development should be. Otherwise, we’re going to be slicing rounded corners and drop shadows until the cows come home or Eric Meyer gets a haircut… whichever comes first.

HTML5 – New Age Of Semantic Markup

Structure

One of the most glaring deficiencies of HTML4 is the lack of semantics in the basic layout structure of a web page. It’s so ambiguous that we had to come up with our own makeshift interpretations. Just think of how your naming system has evolved over time with how you name your “nav”, “header” and “sidebars”.

Enough of that says HTML5! The block structure we’ve come to love (or hate) has been acknowledged with the addition of some new elements:

header: can be used to group together items at the head of a web page like a logo and mission statement or can be used again elsewhere to handle the author name and date of an article for instance.

footer: similar to the header in that it is meant to group together items in a footer capacity but can be used again in articles, blog posts or any content that would require it.

nav: is meant to be used to handle all the various types of navigation out there whether it be the main navigation, pagination or even a bread crumb.

aside: is meant for indirect content sections around your main content. We know them as sidebars but I suppose things like pull quotes count too.

article: was created to represent independent distributable content. This type of content can best be described as having a beginning and an end to it and can exist by itself because of its self-contained nature. Think a full article, a complete blog post or even a forum post

section: can be described as a generic element that helps with organization as it is meant to be referred to in a document outline. This is different than a div because this implies it belongs as part of a group in a larger context.

Inline Semantics

Depending on who you talk to, inline semantics is the best thing since sliced bread or a horribly constricting device meant to torture web developers. I’m for the former. The features involved with them are beneficial and I see it as a evolution that will be exploited for everybody’s benefit once it becomes more commonly used. Here are some of the most promising:

figure: should be used for annotating diagrams, photos and illustrations. I have many clients in my studio that can greatly benefit from this feature now.

time: is a little bit more up in the air as I see it now but the way I am interpreting it is that there will now be a common format we can all get behind that will work across all browsers in all countries. So this may possibly make JavaScript and CMS output more useful… we’ll see.

details: the gist of this element is that it works as meta data on-demand for the user. Like adding more formal descriptions to diagrams if a user activates it via interaction. I’m always fighting between balancing open layouts where users can scan all the data versus more orderly layouts where users have to click deeper for the details. This addresses what we’re already doing with jQuery but I wonder if this will lead to bad usability practices.

Interactive Improvements

Video and Audio

As of late, this is one of the hottest topics surrounding HTML5 because of the recent controversy between Apple and Adobe concerning Flash support. Read more about it… or read the rebuttal…

For me, video on the web has always been a huge pain in the rear. Video in itself is already a confusing task for web developers and that’s why we’ve come to enjoy using outside services like YouTube, Vimeo and etc. to take care of the hosting, playback options and headaches for us.

That may still be the best way to go because as of right now, HTML5 video and audio tags are still not supported across the browsers with any consistency. The big idea behind HTML5 video and audio is that it can be embedded directly into the browser sans plug-ins like Quicktime and further controlled using Javascript.

Another interesting tidbit is that the source is now treated as a child element and be specified multiple times. That means although the browsers have compatibility issues, you can specify two or three sources to cover your bases (which we can all agree is a very unattractive work-around).

Canvas

The canvas tag is also a hot topic – but for the developers. It is basically a 2D drawing element that uses it’s own JavaScript API. The sky’s the limit and as an example, you can check out Bespin – a Mozilla experiment that uses the canvas tag to create a Web code editor. I’ve also seen people use the tag as image editor, a mapping app and even a calendar.

You can check out Canvas Demos to see apps, games and tutorials for the canvas tag.

Be Excited!

It’s a hell of a lot more fun to be a designer/developer now than it was just 5 years ago. With HTML5 and CSS3 already being usable technology right now, it will be even more fun. This is the time to get ahead of the curve and either practicing better semantic techniques in preparation for the future or becoming a HTML5 ninja right now!

More Resources:

• W3C: HTML5
• HTML5 differences from HTML4
• A List Apart: A Preview of HTML 5
• A List Apart: Get Ready for HTML 5
• Tech radar: Everything you need to know about HTML5
• Dive Into HTML5
• HTML5 gallery
• HTML5 and The Future of the Web
• HTML 5 Demos and Examples

How do you feel about HTML5? Share in the Comments!

This entry was posted on Tuesday, March 23rd, 2010 at 9:28 pm and is filed under HTML5, Web Design, Web Dev. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.