php[architect] logo

Want to check out an issue? Sign up to receive a special offer.

HTML 5: What You Need to Know

Posted by on July 2, 2009

Speaking of HTML 5 is not an easy task when so much of our time is still wasted designing mark-up code that works across more than one browser without bringing mayhem and destruction to the known universe—but a revolution is under way that will transform HTML as we know it today into the very backbone of tomorrow’s semantic web.

Even if much of your work today is on the back-end side of things, and you deal more with database queries and web services than front-end design, it’s always a good idea to keep up with the times and be aware of what’s going on in the world of HTML standards.

For this purpose, we managed to track down Ben Ramsey, who works as Senior Architect for Schematic (and who will be one of the featured speakers at this year’s CodeWorks 09 conference tour). Like many in the PHP world, his work is primarily focused on backend work, but he makes it a point to stay abreast of developments in the frontend arena as well.

Ben, how important is it to keep up with HTML 5?

There have been no advances in HTML for 10 years, which is why HTML 5 is a welcome change—particularly because its focus is the transformation of HTML from a simple mark-up language into the foundation of the semantic web. Semantic mark-up is important because, when done properly, others can “scrape” your mark-up to get useful data that they can then use to make cool things. People don’t like to talk about web scraping these days, but I still think it’s an important topic. I recently wrote the foreword to Matthew Turland’s web scraping book, making a case for the continued importance of web scraping topics in a future of linked data and the Semantic Web.

I still believe the Semantic Web is possible. When it is realized, the number of web services APIs will be reduced, and the data we want will simply be embedded in HTML. We’ll access it by scraping it because the owners of the data will want us to scrape it. Web pages will become the new data APIs. I think HTML 5 is a great leap in that direction.

I keep up with HTML 5 because I think the future of web services lies in semantic mark-up embedded in standard web pages and not in the continued proliferation of separate APIs. Since web services are of great interest to me and an area that I spend a lot of time researching, my research has naturally led me to learn all I can about HTML 5 and the direction of the Semantic Web.

What is the driving rationale behind HTML 5?

As I see it, the primary rationale for drafting HTML 5 was to specify how HTML relates to web applications. Previously, this hadn’t been done. HTML was described in a vacuum as a mark-up language, nothing more. The specification didn’t attempt to address its use in a whole application. HTML 5 changes this by describing the role of HTML as it fits in with a collection of scripting APIs that are now considered part of HTML 5.

Also, the working group for HTML 5 has taken this opportunity to clarify elements, deprecate others, and introduce new elements and attributes in accordance with the direction of modern web development.

What are some of the cool new features of HTML 5?

The release of Firefox 3.5 [which came out on June 30th —Ed.] highlighted some of the cool new features: the audio and video elements. However, Safari—or WebKit, rather—has supported these and more of the “solid” parts of the HTML 5 spec for a while.

Another cool feature that I’m excited about is DOM storage, which is sort-of like cookies on steroids, with one major difference: it’s wholly client-side. The server never sees the data. But the neat thing is that it allows for greater storage capacity on the client, and you can sort of keep little databases per domain on the client side. I think this is going to reduce or eliminate the need for server-side sessions, and will ultimately improve web app performance.

Some other cool features include the canvas tag and API for creating dynamic bitmap images; the datagrid element and scripting API; the progress element; the nav, header, and footer elements; the article, section, and aside elements (useful for authors); and more.

The coolest thing, though, and I’ve already mentioned it several times, is the focus on DOM scripting. HTML 5 defines actual JavaScript APIs and interaction with HTML 5 elements. This is going to make things much easier for web application developers.

What do you predict the rate of adoption will be? When can we start using HTML 5 in practice?

Well… now that’s a tough question. It’s the important one, though. In many ways, it’s sort of a chicken-and-egg issue: in order to take advantage of the cool features and functionality HTML 5 provides, browsers must support it, but sometimes browsers don’t support features until they start seeing developers use them.

In the meantime, though, developers can start using the new elements, assigning CSS and custom JavaScript to them to mimic how they should behave according to the HTML 5 spec. I wouldn’t be surprised if someone already has a JavaScript library to bring HTML 5 compatibility to non-HTML 5 browsers.

The good thing is that a lot of modern browsers already support
HTML 5 features.

What about browser support?

I don’t have the statistics or a chart in front of me showing me what parts of HTML 5 each browser supports, but I do know that the newest versions of Safari, Firefox, Opera, and Chrome already support some parts of the specification. And I think browser makers are making extra efforts to ensure that functionality behaves the same across the various browsers—no one wants an IE6 repeat.

How do you think that HTML 5 will change web development?

HTML 5 brings back the “D” in dynamic HTML. DHTML has become somewhat of a dirty word in the client-side development community. People prefer to call it “Ajax” or “Web 2.0 functionality” these days. But the truth is, HTML 5 is truly a specification for dynamic

I’m not so sure that HTML 5 will change web development as much as it reinforces the natural progression and trends we’re seeing in web development. That is, we’re developing websites with more semantic markup (microformats, etc.), we’re seeing richer experiences in the client-side through the proliferation of JavaScript libraries and frameworks, and we’re seeing a trend towards exposing our raw data for others to consume and mash-up.

HTML 5 is the natural evolution of HTML to keep up with these trends, and it will make adoption of the trends that much easier, solidifying their place among web development best practices.

There are a few predictions I can make, however.

I think we’ll finally start to see predominately Flash-based websites fade into the background, specifically as the trend
continues to provide data in a more semantic way. Flash only hinders the progress of the Semantic Web, while HTML 5 pushes it

Furthermore, I think we’ll start seeing a proliferation of rich desktop and mobile clients—especially the latter—that take us away from interacting with websites through traditional web browsers and give us an enhanced experience with the client doing all of the display and state maintaining work, while the server is just there to send and receive data.

And, speaking of state, the DOM storage API almost eliminates the need for server state, so we’ll start to see a lot more storage taking place in the client, freeing up servers from the burden of maintaining state.

The current draft of the complete HTML 5 spec can be found on
the W3 Consortium’s website. What do you think? Will it enter widespread usage in a relatively short term, or are we looking down the barrel of a new browser war?

Marco is the keeper of keys and Chief Garbage Collector at Blue Parabola. He can be found on Twitter as @mtabini.
Tags: ,

Responses and Pingbacks

I thoroughly enjoyed the path this article took. I’m just cracking open HTML5 and I’ve found many people only focus on the semantic bits. Though important, this 50,000 ft view was refreshing and helped me reposition my thoughts on where we are and where we are going.


Leave a comment

Use the form below to leave a comment: