[/shameless quote of “Flash” by Queen (see Youtube video here)]
For those of us who still code in the Stone Age of HTML 4.01 (*raises hand* guilty as charged), HTML5 is a vaguely strange new planet on the horizon of web development, and has been for a couple of years now. I have blundered around this topic for a while now, trying to decipher what exactly I need to know about this new standard of web development. What is it like? How is it different? And most of all, what can I make it DO?
I Wasn’t Kidding When I Made the “Flash” Joke
Really. HTML5 does things we HTML 4.01 coders never dreamed the language would be able to do…and if we did dream of it, we knew it could only be done in Flash. (That was what stopped me from doing a lot of “cool interactive stuff” on my page–I didn’t know how to do Flash and found it way too daunting to teach myself.)
With the advent of HTML5, however, there are now common-sense tags for all sorts of interactive and structural things, including:
- A simplified “doctype” tag: <!DOCTYPE html>. (HAAAAAA-LE-LU-JAH!)
- A tag for marking/highlighting text: <mark>
- Sectional tags, like <header>, <footer>, <nav>, <article>, and <details>, for separating out page content
- Awesome new media tags like <audio> and <video>, and <canvas> (for “freehand” drawing on the HTML page)
- Javascript-like event handling
- Drag’n’drop functionality (!!!)
HTML5 is Seriously Cleaned Up, Y’all
With new standards comes lots of new rules, as we’ve seen, but there are tons of fixes for the “old” rules as well. The developers wanted to fix much of what was wrong with 4.01 and roll it out into 5, as well as provide new features that 4.01 never did, so they did the following (quoted from w3schools.com‘s developer idea list):
- “New features should be based on HTML, CSS, DOM, and JavaScript”
- “Reduce the need for external plugins (like Flash)”
- “Better error handling”
- “More markup to replace scripting”
- “HTML5 should be device independent”
- “The development process should be visible to the public”
(Valleygirl Voice) Ugh, These Tags Are, Like, So 1999
By the way, say goodbye to these old relics–they do not exist in HTML5 at all. (Of these, I think I only ever used “font”, “center” and “frame”…lol, shows how often these were used, huh?)
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
What Does All This Mean to Ground-Level Developers?
Basically, we won’t have to learn 10 languages just to make an eye-pleasing, interactive page anymore. Nor will we have to make sure everything is cross-browser compatible concerning plugins and scripts. So much more of HTML5 is based on making everything very understandable for the browser, without a whole bunch of extra code in various other languages.
With HTML5, a lot of the useless bulk of coding has been removed, tightening up and better specifying what remains. Switching your page from HTML 4.01 to 5, then, is akin to me doing Zumba for 10 months–it loses a little of the extra weight, and trims up in several places, finding muscles it didn’t know it had.
The most interesting parts of HTML5, for me, is what the developers mean by “better error-handling” and “visible development process.” Does this mean that one error on an HTML page no longer screws up everything else (like XHTML so famously does)? Does this mean that HTML5 is now an “open-source” project? There are many more bits left to be discovered and explored…and, for those of us who love web development, that’s 3/4 of the fun.
For Further Information
W3Schools.com’s HTML5 Section: Very informative (where I got some of the info for this article)
HTML5Demos: View live demos of some of the coolest features
HTML5 Rocks!: Up-to-date bloglike articles on HTML5
HTML5Doctor.com: Informative and well-sorted (but jargon-laden)…best for advanced coders (which sure ain’t me, LOL)
HTML5.org: Mainly an aggregator of more resources on HTML5