Brief Intro to HTML 5

By Michael Flanakin @ 4:16 AM :: 2186 Views :: Development, Open Source/Standards :: Digg it!

To my surprise, HTML 5 has been in the works since 2004. While still 5 years late, in my mind, this just shows the ridiculous nature of these standards. I'm not saying all standards are this way... who am I kidding? I love the idea of having standards, but they take entirely too long to make it to the real world. It's like seeing a fantastic project in a research firm. It most likely resolves something you've been pained by for years, but you won't be able to benefit from that work for several more years, most likely. But, I digress... HTML 5 seems to have 3 main goals in mind: flexibility, interactivity, and interoperability.

When thinking about flexibility, HTML 4 gives us a lot. One of the problems HTML 5 seeks to attack is the lack of meaning to one of the most popular tags. No, not the <table>, which is used entirely too much; the <div> tag. Wondering what the problem is? So was I at first glance, but I think what the group is coming up with is better. There will be new tags to represent different sections of a web page. I liken this a lot to a newspaper or magazine, but it works fairly well for the web. The idea is, instead of creating <div> sections to correlate to your header, navigation, different sections and the footer, you'd use more descriptive tags (i.e. <header>, <nav>, <section>, and <footer>). Consider the following images. The first represents what you might do in HTML 4 and the second in HTML 5.

HTML 4 based layoutHTML 5 based layout

The markup would then look like this for HTML 5...


The first thing I thought was that this new model may not map 100% to all sites. Then I realized, they're just websites. You may not think about things as "articles," but that doesn't mean there isn't an equivalent in your context. There are, of course, more and more apps are moving to the web, so depending on how that happens, these may not work. I don't see this getting rid of the <div> tag, tho; merely offering something more specific to use, when applicable. Mixed with CSS, these new tags could be very nice.

There will also be better support for the head (<h#>) tags. Currently, most people use different tags at different levels and style them appropriately, so every <h1> looks the same, no matter what level they're at. With HTML 5, head tags will be more contextual, where different levels will be treated differently. Actually, I'm making an assumption here that probably isn't true at this time -- that CSS will know the difference between the different tags at different levels. CSS 2 most likely won't be able to, but hopefully CSS 3, whenever that's supposed to be out, will. Here's a block of HTML to portray the structure I'm referring to...

  <h1>Level 1</h1>
    <h1>Level 2</h1>
      <h1>Level 3</h1>

My vision is that the 2nd and 3rd <h1> in this example would be treated as <h2> and <h3> tags today.

While the new tag structure is nice, it's more for designers than developers. The feature developers will be happy to see will be the additional interactivity support, which will require much less work and more compliance across the board. Given the rise of multimedia content online, native support for multimedia content via <video> and <audio> tags is one of these improvements. One of the things that aggravates me about the current talk of these tags is a controls attribute, which specifies whether to use the default or custom controls. This is an attribute with no value, which isn't XHTML compliant. I know HTML isn't XHTML, but it'd be nice if the damn standard would at least take a step in the right direction. The additional ="true" wouldn't polute the spec. Despite that, the tags look promising. With the ability to customize the UI and built-in support for common actions like play, pause, and setting the current play time, I think most people will be fairly happy. That's not it, tho, there will also be APIs to support 2D drawing, storage, offline capabilities, editing, drag & drop, messaging, and my favorite, back button management. I haven't seen much about these, but I'm very excited about storage, offline, and back button management capabilities. These are problems that plague web developers.

As for interoperability, HTML 5 will be represented by its structure, rather than syntax. The key benefit of this is that it allows better support for the two formats HTML documents support: HTML and XHTML. As I understand it, the dual support is to provide better backward compatibility support with HTML. I see this and think, "Then why the hell would I even use HTML?" Maybe it's just me, but I'd rather use the markup language that provides the most forward compatibility. XHTML also provides some integration with external XML formats. The argument for HTML seems to be all about supporting lazy designers/developers who feel burdoned by the enforced structure. To me, they just need to get over it. The lack of structure in HTML is one of the main reasons the language sucks so much and causes so many problems across browsers. You could probably liken this to the VB vs. C# wars that were kicked off 7 years ago. To me, forward compatibility is more important than backward compatibility (aka laziness ). Different strokes, I guess.