On January 22nd, 2008, W3C published a working draft for HTML 5, with the latest (4th) draft having been released in March of 2010. There are lots of cool new features that have been added and sweet modifications to HTML in HTML5. Many people will argue that HTML5 will lower the demand for flash in websites and eventually cause flash to fizzle out. I’m am not sure that I am willing t0 jump on that band wagon yet, but HTML5 does seem pretty cool.
The new HTML defines a syntax that is compatible with HTML4, XHTML and XML. There have been several tags that have been deprecated or changed as well as new tags that have been added. Many of the changes are most notable with respect to their use with JavaScript (most notably the CANVAS tag), but there are also some that will effect general HTML coding as well (like the VIDEO and AUDIO tags). While many of the tags are not yet working and it will still be a bit longer before HTML5 is fully accepted, it will be fully accepted as AOL, Apple (big time to cover their butts with the whole Flash terms of service 3.3.1 article), Google, IBM, Microsoft (a bit ironic as IE is the death of all new web technologies), Mozilla, Nokia, Opera, and many hundreds of other vendors are all in full support of HTML5. Taken right for the W3C website “HTML 5 is not a W3C recommendation yet!”, so don’t pitch the HTML4 or XHTML that you have been coding with. This said, learn it now because it will break out soon. But enough banter, what is new and what is better?
New Common Tags
Video: This new tag allows you to place a video just like you would place an image. For the win-doze browsers like IE6 (**shaky fist**), the video tag even allows for the you to display content should the tag not be recognized by your lame browser. The syntax is as follows:
<video src="file_name.mov" controls="controls">
your crappy browser does not support the video tag, STOP using IE6!!!
</video>
Pretty cool and very straight forward, right? You can even display the player controls with a simple tag attribute! The content between the open and close tag will only be displayed if the browser the view is using does not support that tag.
Audio: Much in the same light as the video tag the audio tag will allow you to play sound files using a similar format.
<audio src="file_name.mp3" controls="controls">
Again with the shotty browser?? Download FireFox (aka, the hotness!)
</audio>
Embed: This bad boy gets rid of the whole “<script>” and “<noscript>” shtick. Here you can simply throw in the embed tag and source a SWF file. You can embed any sort of plug in here with this sweet new tag. The only down side is that you can’t put content between the open and close tags to display different content should a browser not support the embed tag. So to make sure that the older browsers don’t leave a huge white space where your pretty flash video should be, you will need to code the heck out of it (thus looking much like current embedded lash scripts)…no body is perfect I suppose, it’s the thought that counts.
Input tag: New to HTML5 are a whole bunch of input types. These include TEL, SEARCH, URL, EMAIL, DATE, MONTH, WEK, TIME, COLOR and a few others. Several of these come with some value expectations and handling capabilities (like the TIME type) while others just change the appearance to the content stylistically (like the SEARCH type). It is not too hard to see how this will be super helpful when creating forms and their code (like say the color input type which expects a value from a color picker)…
Section tags: These are pretty cool set of tags that add more meaning to your content, in the true light of HTML. They consist of a SECTION, NAV, HEADER, FOOTER, and FIGURE tags with sub tags like the ASIDE, DETAILS, FIGCAPTION, and HGROUP tags. They are pretty much glorified DIV tags, but that offer more meaning to the content held within—I would bet that down the road a while these will definitely play a roll in SEO ranking… just a thought.
New Dev Tags
This is really where the true power of HTML 5 shines through. Seeing as most of my followers are not developers, I will not really dive into this too much. If you are interested in seeing the full list of HTML 5 specs check out the W3C HTML 5 spec details. This said here are some pretty cool features:
Canvas: This allows you to interact directly with the HTML natively. Here is a cool demo and check out the video clip below:
I looked around quite a bit and could not find a live demo of that, but here is a example that you can play around with to get a fell for the idea (only not as cool of course). Asteroids!
Other tags: There are a few others out there like the TIME, RUBY, KEYGEN, COMMAND and PROGRESS tags. These are coupled with a few short lines of code make development a bit easier. If you want more details visit the W3C website.
All of this is pretty cool, so do I ditch XHTML/HTML4?
NO! Don’t abandon ship to jump the HTML5 train. HTML5 has already “been around” (or at least been in public view) for two years and it still is under development. Even once it is “finished” and the newest set of browsers out there will read HTML5 you still have the issue of all of the legacy browsers. Sure IE6 is dying (though now quickly enough), but then there is still IE7, and don’t get me started on the whole browser topic (if you want to read about that, feel free to check out this post: Die already IE6! No Seriously…). Definitely test out HTML5, give it a try but don’t throw out the other stuff just yet. If you remember when XHTML first came out, everyone was so excited they were sure that HTML would die all together, and now it seems as though there will never be an XHTML2.0, so who knows really. The web world is fickle and what people hate today may be the next hot thing tomorrow…
For a complete list of the HTML5 tags and to keep up to speed with the pulse of the HTML front, check out this link to the W3C Schools HTML 5. If you have any thoughts, or opinions on HTML5 or where the web is headed we would love to hear it! Happy coding :-)
Tags: HTML, Web Dev, What's Hot
Splist for jQuery: I am very excited to announce my jQuery plug-in -