Fresh

Can you guess what the most important piece of software is on a personal computer? It’s not Notepad, it’s not any office productivity suite, and it’s not Solitaire. Certainly the most important piece of software, at least since the 90’s, is the web browser. The web browser has brought the whole world together digitally through web email, shopping web sites, and Facebook. (And yes, you can also use a web browser as a notepad, office suite, and you can play Solitaire with one, too.)

Content on the web has evolved from simple text and tables to elaborate layouts of page intermixed with images, audio, and video. The underlying HTML used to display this rich content has evolved as well. From the early workings of HTML 1 all the way to HTML 4, HTML has seen a steady growth. The current version, HTML 4, is great. The language allows for embedded objects (like Flash), and other neat stuff.

HTML 1 (left) to HTML 4 (right)

After attending Bruce Lawson’s HTML 5 presentation at SXSW 2010, I discovered HTML can be better. Wouldn’t it be great to write cleaner HTML markup that consisted of more than just <div>’s? Wouldn’t it be great to be able to embed video on a page without Flash? Wouldn’t it be great to be able to perform form validation without the use of JavaScript? All that and more is possible with HTML 5.

Cleaner Markup

A typical page consists of a bunch of <div>’s. A <div> for the header, a <div> for the sidebar navigation, a <div> for the body content, and a <div> for the footer. In HTML 5, the header of a page can now be nested inside the new <header> tag, navigation elements can now live in the <nav> tag, and footer elements can now live in the <footer> tag. There’s also a new <article> tag for organizing body content. Why all this? Better semantics in the HTML you write. Find out what Semantic HTML is and why you should use it.

Embedded Video

Embedding video in Flash has no doubt changed the game when it comes to providing rich multimedia content through a web browser. While Flash does have some benefits, there is something better. HTML 5 Video! Why? No additional plug-ins are needed. And, with support for captions in the video, embedding video is also SEO-friendly.

HTML 5 Video Demo

Form Validation

Always a tedious task for web developers, form validation often involved using JavaScript to check to see if certain input fields were empty and refuse to submit the form until all required fields were filled in. With HTML 5, the JavaScript can be eliminated and replaced with one attribute added to the <input> tag: required. That’s it. That one word inserted into the <input> tag will tell the browser that the field should not be ignored. No JavaScript necessary.

So… Where Art Thou?

I knew about the embedded video aspect of HTML 5 before attending SXSW 2010, and after attending several presentations I became familiar with the other aspects. After the presentations (especially Lawson’s), I still know only a fraction of HTML 5’s complete feature set. And why haven’t these and other cool HTML 5 tricks reached the mainstream web development community yet? Because the formal specifications for HTML 5 have not been finalized. As a result, all browser manufacturers have not yet begun supporting all of the new features of HTML 5. The current spec of HTML 5 is about 1,000 pages long! (Don’t believe me? Try printing the HTML 5 Specs from the World Wide Web Consortium.)

However, all of the browser manufacturers do support SOME of the features. The final spec of HTML 5 is said to be done by around 2011, so we have quite a while before we see some positive dramatic changes online. When that happens, HTML will grow up and finally be the man you hoped it would become. What features of HTML 5 are you looking forward to the most?

Look at HTML 5, that pimp

Oh yeah, and KillROI says hello.

KillROI Made the Trip to SXSW 2010

Special thanks to Bruce Lawson for the slides.